var interactiveApp = {
  appRoutes: appRoutes,
  audioHandles: {},
  currentAudioID: null,
  videoHandle: null,
  quizes: [],
  currentRoute: null,  
  preloadjs: null,
  scormLmsConnected: false,
  scormTimerHandle: null,
  timeline:null,
  menuBtn: $('#menu-icon'),
  menuContainer: $('#menu-container')
};
DEBUG = true;

Chart.defaults.global.responsive = true;
Chart.defaults.global.animation = false;

var unloaded = false;
function OnUnload()
{
   if(unloaded == false)
   {
      pipwerks.SCORM.save();
      pipwerks.SCORM.quit();
      
      unloaded = true;
   }
}

$(function() {

  var preload = new createjs.LoadQueue();
  interactiveApp.preloadjs = preload;
  preload.on('complete', handlePreloadComplete);
  $('#content, #nav-next, #nav-prev, #menu-icon, #menu-container').hide();  

  function handlePreloadComplete () {
    clog('preload complete..');  
    $('#preloader').hide();
    $('#content, #menu-icon, #menu-container').show();
    initRouting();
    // interactiveApp.initSCORM();
  }

  if (manifestToLoad == undefined) manifestToLoad = [];

  $.each(interactiveApp.appRoutes, function (index, value) {
    if (value.audioURL) {
      manifestToLoad.push({id: value.name, src: value.audioURL});
    }
  });
  if (manifestToLoad.length) {
    // createjs.Sound.registerPlugins([createjs.HTMLAudioPlugin]);  // need this so it doesn't default to Web Audio
    preload.installPlugin(createjs.Sound);
    // clog(manifestToLoad);
    preload.loadManifest(manifestToLoad);    
  } else {
    handlePreloadComplete(); 
  }

  function initRouting() {

    interactiveApp.mainSection = $('#interactive-container > #content');

    $('body').on('click', '.confirm', function (e){
      var t = $.tooltipster.instancesLatest();
      if (t.length)
      {
        t[0].close();
      }
    });

    $.sammy(function() {

      var _this = this;      

      $.each(interactiveApp.appRoutes, function(index, value) {   
        _this.before(value.url, function() {
          for (var p in interactiveApp.audioHandles) {            
            interactiveApp.audioHandles[p].stop();
          }
        });

        _this.get(value.url, function() {   
          $.get(value.templateUrl, function(d) {

            interactiveApp.setSCOLocation(value.url);

            var menus = interactiveApp.menuContainer.find('a');
            $.each(menus, function (i, menu) {
              menu = $(menu);              
              menu.routeID = interactiveApp.getRouteID(menu.attr('href'));
              if (menu.routeID <= parseInt(value.id)) {
                menu.removeClass();
              }
            });

            interactiveApp.currentRoute = value;

            function setContent() {

              $('#logo').show();

              // set the content
              interactiveApp
                .mainSection
                .html(d);    

              $('.modal-catel').hide();
              
              $('.tooltip').each(function (i, el) {
                el = $(el);
                var trigger = el.hasClass('tooltip-click') ? 'click' : 'hover';
                el.tooltipster({
                  trigger: trigger,
                  interactive: true,
                  contentAsHTML: true,
                  theme: ['tooltipster-noir', 'tooltipster-noir-customized']
                });  

                if (el.hasClass('tooltip-confirm')) {
                  var content = '<p style="text-align:center">'+$.nl2br(el.tooltipster('content'))+ 
                      '<br><a class="confirm yes" href="'+ el.data('tooltip-href') +'">Yes</a> <a class="confirm no">No</a></p>';

                  el.tooltipster('content', content);
                }
              });

              executeScript();  
              interactiveApp.initQuiz(value.id); 
              interactiveApp.initTween();


              $('a').off('click');
              $('a').on('click', function(e) {
                e.stopPropagation();
                var source = $(this);
                var href = source.attr('href');
                if (href && /^#\//.test(href)) {
                  window.location = href;                  
                  href = href.substring(2);
                  for (var i=0; i<interactiveApp.appRoutes.length; i++) {
                    var route = interactiveApp.appRoutes[i];
                    if (href == route.url) {
                      if (route.audioURL) {
                        interactiveApp.playAudio(route.name);
                      } else {
                        interactiveApp.currentAudioID = null;
                      }
                      break;
                    }
                  }
                } else if (source.attr('id') == 'nav-next' && index+1 < interactiveApp.appRoutes.length) {
                  window.location = '#'+interactiveApp.appRoutes[index+1].url;      
                  interactiveApp.playAudio(interactiveApp.appRoutes[index+1].name);
                } else if (source.attr('id') == 'nav-prev' && index-1 > -1) {
                  window.location = '#'+interactiveApp.appRoutes[index-1].url;      
                  interactiveApp.playAudio(interactiveApp.appRoutes[index-1].name);
                } 

                return false;
              });

              if (value.hideNext) {
                $('#nav-next').hide();
              } else {
                $('#nav-next').show();
              }
              if (value.hidePrev) {
                $('#nav-prev').hide();
              } else {
                $('#nav-prev').show();
              }
              if (value.hideNext && value.hidePrev) {
                $('#nav-prev').parent().hide();
              } else {
                $('#nav-prev').parent().show();
              }

              if (interactiveApp.scormLessonLocation != undefined && interactiveApp.scormLessonLocation != '') {
                $('#start').attr('href','#'+interactiveApp.scormLessonLocation);        
                interactiveApp.scormLessonLocation = '';
              }

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


            if (interactiveApp.outAnim) {
              interactiveApp.outAnim( setContent );
            }
            else {
              setContent();
            }
            
          })
        });      
      });

    }).run('#/');

  }

  $('#interactive-container').on('click', '.action-resume-animation', function () {
    if (interactiveApp.timeline != null) {
      interactiveApp.mainSection.removeClass('tween-paused');
      interactiveApp.timeline.resume();
      if (interactiveApp.currentRoute.audioURL) {
        interactiveApp.audioHandles[interactiveApp.currentRoute.name].paused = false;        
      }
    }
    $(this).off('click');
  });

  interactiveApp.menuContainer.css('top', '-200%');
  interactiveApp.menuBtn.on('click', function() {    
    var menu = interactiveApp.menuContainer;
    var btn = interactiveApp.menuBtn;
    if (btn.data('is-open')) {
      btn.data('is-open', false);
      TweenLite.to(menu, 2, {top: '-200%', ease:Expo.easeOut});      
    } else {
      clog('open dong..')
      btn.data('is-open', true);
      TweenLite.to(menu, .5, {top: 0, ease:Expo.easeOut});      
    }

    var icon = btn.children('img');
    var tmp = icon.data('alt-img');
    icon.data('alt-img', icon.attr('src'));
    icon.attr('src', tmp);
  });
  interactiveApp.menuContainer.on('click', 'a', function (e) {    
    e.stopPropagation();
    var $this = $(this);
    clog($this.hasClass('disabled'));
    if ($this.hasClass('disabled')) 
      return false;
    
    interactiveApp.linkChange( $this.attr('href') );    
  });

});

interactiveApp.linkChange = function (href) {
  window.location = href;                  
  href = href.substring(2);
  for (var i=0; i<interactiveApp.appRoutes.length; i++) {
    var route = interactiveApp.appRoutes[i];
    if (href == route.url) {
      if (route.audioURL) {
        interactiveApp.playAudio(route.name);
      }
      break;
    }
  }
};

interactiveApp.initSCORM = function() {     
  var self = this;
  
  self.scormLmsConnected = pipwerks.SCORM.init();

  //flagLocations("0|0,0|0,0|0~opening_1,tujuan_0,menu_0,pembinaan_0,hubungan-kerja_0,resiko_0,assessment_0~0|0|0|0~0|0");
  
  if(self.scormLmsConnected)
  {       
    self.scormLessonStatus = pipwerks.SCORM.data.get("cmi.core.lesson_status");
    
    if(self.scormLessonStatus == "completed" || self.scormLessonStatus == "passed" || self.scormLessonStatus == "failed"){
      
      //Course has already been completed.
      
      //_scorm.disconnect();
      
    } else {
      
      self.scormLessonLocation = pipwerks.SCORM.data.get("cmi.core.lesson_location"); 

      
      var rData = pipwerks.SCORM.data.get("cmi.suspend_data");
      self._scormSuspendData = [];          
      if(rData != "")
      {           
        // flagLocations(rData);
      }
                
      interactiveApp.initSCORMTimer();
                        
      if(self.scormLessonStatus == "not attempted" || self.scormLessonStatus == "") 
        _scormSuccess = pipwerks.SCORM.data.set("cmi.core.lesson_status", "not attempted");
      else
        _scormSuccess = pipwerks.SCORM.data.set("cmi.core.lesson_status", "incomplete");
    }
    
  } else {
    
    clog("Could not connect to LMS.");
    
  }
  
};

interactiveApp.setSCOLocation = function (value) {
  if (!interactiveApp.scormLmsConnected) return;

  pipwerks.SCORM.data.set('cmi.core.lesson_location', value);
  if(!pipwerks.SCORM.data.save()) {
    clog("API: data failed to be set");
  }              
};

interactiveApp.initSCORMTimer = function () {
  clearInterval(self.scormTimerHandle);
  var intervalCount = 0;
  self.scormTimerHandle = setInterval(function(){   

    clog (pipwerks.SCORM.data.set("cmi.core.session_time",
      interactiveApp.formatTimeSCORM(++intervalCount)));

    // if(!pipwerks.SCORM.data.save()) {
    //   clog("API: data failed to be set");
    // } 

  }, 1000);
};

interactiveApp.formatTimeSCORM = function(time) {   
  var strTime = "";
  var second = time%60;
  var minute = Math.floor(time/60)%60;
  var hour = Math.floor(time/3600);
  
  if (hour<10) 
    strTime += "0"+hour+":";      
  else
    strTime += hour+":";
  
  if (minute<10) 
    strTime += "0"+minute+":";
  else
    strTime += minute+":";
  
  if (second<10) 
    strTime += "0"+second+".00";
  else
    strTime += second+".00";
  
  // console.log(strTime);
  return strTime;
};

interactiveApp.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);
    }
  }
};
interactiveApp.LOProgress.init();

interactiveApp.initTween = function () {
  var tl = new TimelineLite();
  interactiveApp.timeline = tl;

  var timelineArr = new Array();
  interactiveApp.mainSection.find('.moveable').each(function (i, el) {
    el = $(el);
    // get the data-options
    var animationProps = parseAnimAttrs(el.attr('data-options'));

    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 && key != 'addPause') {
        props[key] = val;
      }      
    }); // end each opt     

    if (opt.label != '') {
      tl.addLabel(opt.label);
    }

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


    var target = '#'+opt.target;

    tl.from( target, opt.duration, props, position );
    // clog('tl.from('+target+', '+opt.duration+','+JSON.stringify(props)+','+position+')');

    if (opt.addPause != undefined) {
      tl.addPause("+=0", function() {
        interactiveApp.mainSection.addClass('tween-paused');
        if (interactiveApp.currentRoute.audioURL) {
          interactiveApp.audioHandles[interactiveApp.currentRoute.name].paused = true;        
        }
      });
    }
  }); // end each timelinearr
};

interactiveApp.playAudio = function (id) {
  if (interactiveApp.audioHandles[id] == undefined) {
    interactiveApp.currentAudioID = id;
    interactiveApp.audioHandles[id] = createjs.Sound.play(id);
  } else {    
    if (interactiveApp.currentAudioID == id) return;

    for (var p in interactiveApp.audioHandles) {    
      interactiveApp.audioHandles[p].stop();
    }   
    interactiveApp.audioHandles[id].play();
    interactiveApp.currentAudioID = id;
  }
};

interactiveApp.getRouteID = function (url) {  
  for (var i=0; i<appRoutes.length; i++) {
    if ('#'+appRoutes[i].url == url) {
      return parseInt(appRoutes[i].id);
    }
  }
  return false;
};

$(window).TabWindowVisibilityManager({
    onFocusCallback: function(){
      if (interactiveApp.mainSection != undefined) {
        if (interactiveApp.mainSection.hasClass('tween-paused'))
          return;
      }

      for (var p in interactiveApp.audioHandles) {
        interactiveApp.audioHandles[p].paused = false;
      }
      if (interactiveApp.videoHandle) {
        interactiveApp.videoHandle.play();
      }
      if (interactiveApp.timeline) {
        interactiveApp.timeline.resume();
      }
    },
    onBlurCallback: function(){
      for (var p in interactiveApp.audioHandles) {
        interactiveApp.audioHandles[p].paused = true;
      }
      if (interactiveApp.videoHandle) {
        interactiveApp.videoHandle.pause();
      }
      if (interactiveApp.timeline) {
        interactiveApp.timeline.pause();
      }  
    }
});


// window resized
  var ic, w, h;

  ic = $('#interactive-container');
  w = ic.width();
  h = ic.height();


  $(window).resize(resizeme);
  function resizeme() {    
    var win = $(window),
        windowHeight = win.height(),
        windowWidth = win.width(),
        proportion = {w:5, h:3},
        ratio = proportion.w / proportion.h;

    var currentRatio = windowWidth/windowHeight;

    if (currentRatio > ratio) {
      // wider
      h = windowHeight;
      w = h * ratio;
      ic.css({height:h, width:w});
    } else if (currentRatio < ratio) {
      // higher
      w = windowWidth;
      h = w * proportion.h / proportion.w;
      ic.css({height: h, width: w});      
    }
  }
  resizeme();
  ic.flowtype({
    fontRatio : 45
  });  


    // for quiz..    
    interact('#interactive-container .draggable:not(.disabled)')
     .draggable({
        onmove: function (e) {
          calcPercentPos (e);

          var dragEl = $(e.target);
          dragEl.data('dropped', false);  
        },
        onend: function (e) {
          // clog('end');return;
          var dragEl = $(e.target);
          
          if (dragEl.data('dropped') == false) {
            // force return          
            dragEl.addClass('disabled');
                TweenLite.to(dragEl, 0.3, 
                  {
                    top: dragEl.data('orig-top'), 
                    left: dragEl.data('orig-left'),
                    onComplete: function () {
                      dragEl.removeClass('disabled');
                      dragEl.data('prev-left', dragEl.data('orig-left'));
                      dragEl.data('prev-top', dragEl.data('orig-top'));
                    }
                  });
          }
        }
      })
    interact('#interactive-container .dropzone')
      .dropzone({
        accept: '.draggable',
        ondropactivate: function (e) {          
          var dragEl = $(e.relatedTarget),
              parentEl = dragEl.parent();

          // order on top of other
          parentEl.append(dragEl);

          // save the pos
          dragEl.data('prev-left', dragEl[0].style.left);
          dragEl.data('prev-top', dragEl[0].style.top);
        },
        ondragleave: function (e) {
          var dropArea = $(e.target),
              dragEl = $(e.relatedTarget);

          if (dropArea.attr('data-filled') == dragEl.data('drag'))
            dropArea.removeAttr('data-filled'); 
        },
        ondrop: function (e) {
          // clog('drop')
          var dropArea = $(e.target),
            dragEl = $(e.relatedTarget), 
            left = 0,
            top = 0,
            haveToMatch = dropArea.closest('.quiz-matching').hasClass('strict');

          if (haveToMatch) {
            if (dropArea.data('drag-target') != dragEl.data('drag')) {
              dragEl.addClass('disabled');
              TweenLite.to(dragEl, 0.3, 
                {
                  top: dragEl.data('orig-top'), 
                  left: dragEl.data('orig-left'),
                  onComplete: function () {
                    dragEl.removeClass('disabled');
                    dragEl.data('prev-left', dragEl.data('orig-left'));
                    dragEl.data('prev-top', dragEl.data('orig-top'));
                  }
                });

            } else {
              left = (parseFloat(dropArea[0].style.left) + (parseFloat(dropArea[0].style.width)-parseFloat(dragEl[0].style.width))/2) + '%';
              top = (parseFloat(dropArea[0].style.top) + (parseFloat(dropArea[0].style.height)-parseFloat(dragEl[0].style.height))/2) + '%';  
              dropArea.attr('data-filled', dragEl.data('drag'));
              dragEl.css({
                'left': left,
                'top': top
              });          
              
              // check all filled
              var dropAreas = dropArea.closest('.quiz-matching').children('.dropzone');
              var allFilled = true;
              $.each(dropAreas, function (i, el) {
                if ($(el).attr('data-filled') == undefined) {
                  allFilled = false;
                  return false;
                }
              });

              if (allFilled) {
                $('#quiz-submit-btn').trigger('click');
              }
              // end check all filled
              
              dragEl.data('dropped', true);
            }

            return;
          } 

          if (dropArea.attr('data-filled') != undefined) {
            left = dragEl.data('prev-left');
            top = dragEl.data('prev-top');
          } else {
            left = (parseFloat(dropArea[0].style.left) + (parseFloat(dropArea[0].style.width)-parseFloat(dragEl[0].style.width))/2) + '%';
            top = (parseFloat(dropArea[0].style.top) + (parseFloat(dropArea[0].style.height)-parseFloat(dragEl[0].style.height))/2) + '%';
            dropArea.attr('data-filled', dragEl.data('drag'));

            $('#quiz-submit-btn').removeAttr('disabled');
          }
          
          dragEl.data('dropped', true);

          dragEl.css({
            'left': left,
            'top': top
          });          
        }
      });
    // end for quiz

var selectedEl = {}, deselect = false;
// $(document).ready(function() {
//   ic.on('click', '.moveable', function() {
//     var obj = $(this);
//     if (obj.hasClass('selected')) {
//         obj.removeClass('selected');
//         delete selectedEl[obj.attr('id')];        
//     } else {
//       obj.addClass('selected');
//       selectedEl[obj.attr('id')] = obj;
//     }
//   });
// });

function parseAnimAttrs (attrs) {

    if (attrs == undefined) return {};

    var opts = {}, 
        opts_arr = attrs.split(';'),
        ii = opts_arr.length;

    function isNumber (o) {
      return !isNaN (o - 0) && o !== null && o !== '' && o !== false && o !== true;
    }

    function trim (str) {
      if (typeof str === 'string') {
        return $.trim(str);
      }
      return str;
    }

    while (ii--) {
      p = opts_arr[ii].split(':');
      p = [p[0], p.slice(1).join(':')];

      if (/true/i.test(p[1])) {
        p[1] = true;
      }
      if (/false/i.test(p[1])) {
        p[1] = false;
      }
      if (isNumber(p[1])) {
        if (p[1].indexOf('.') === -1) {
          p[1] = parseInt(p[1], 10);
        } else {
          p[1] = parseFloat(p[1]);
        }
      }

      if (p.length === 2 && p[0].length > 0) {
        opts[trim(p[0])] = trim(p[1]);
      }
    }

    return opts;
  }

function calcPercentPos(evt) {    
  var obj = $(evt.target),
      pos = obj.position(),
      x = pos.left + evt.dx,
      y = pos.top + evt.dy;

  var parent = obj.parent(),
      wp = parent.width(),
      hp = parent.height();


  $(obj).css({
    left: x / wp * 100 + "%",
    top: y / hp * 100 + "%"
  });
};

function calcPercentSize(evt) {    
  var obj = $(evt.target),
      parent = obj.parent(),
      wp = parent.width(),
      hp = parent.height(),
      minWidth = minHeight = 3, //percent
      width = evt.rect.width/wp * 100,
      height = evt.rect.height/hp * 100;

  width = width < minWidth ? minWidth : width;
  height = height < minHeight ? minHeight : height;
  $(obj).css({
    width: width+"%",
    height: height+"%"
  });
};

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

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 currentQuizGroup, currentPageID;
interactiveApp.initQuiz = function (pageID) {
  currentPageID = pageID;

  var alreadyAnswered = false;  
  if (quizes && quizes.length) {
    currentQuizGroup = quizGroup[quizes[0].group];    
    $.each(currentQuizGroup.quizes, function (i, qg) {
      $.each(quizes, function (j, q) {
        // user has already answered this question
        // only for mc/tf
        if (q.id == qg.quizID && qg.page == currentPageID && qg.result != undefined 
          && (q.quizType == 'mc' || q.quizType == 'tf') ) {
          alreadyAnswered = true;

          $('input[name='+q.id+']')
            .attr('disabled', 'disabled')
            .closest('.moveable').css('opacity', 0.7);

          $('input[name='+q.id+'][value='+qg.userAnswer+']')
            .prop('checked', true);

          $('input[name='+q.id+'][value='+q.answer+']')
            .closest('.moveable').css('opacity', 1);

          $('#quiz-submit-btn').hide();

          initQuizResponse();

          var sign;
          if (qg.maxTry != 0 && qg.result == false) {
            // show correction marker
            $('#'+q.id+'-correction').show();
            sign = $('#'+q.id+'-incorrect');
            sign.show();
          } else if (qg.result == false) {
            // show incorrect marker
            sign = $('#'+q.id+'-incorrect');
            sign.show();
          } else {
            // show correctmarker
            sign = $('#'+q.id+'-correct');
            sign.show();
          }

          if (sign.hasClass('timeout')) {
            setTimeout(function() {
              sign.fadeOut();
            }, 4000);
          }

        } // endif
      });  //endeach
    }); // endeach
  }

  if (!alreadyAnswered) {
    initQuizMC();
    initQuizMatching();
    initQuizBtns();
    initQuizResponse();    
  }
}

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

  var $submitBtn = $('#quiz-submit-btn');

  $submitBtn.attr('disabled', 'disabled');

  $submitBtn.on('click', function() {

    initQuizResponse ();

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

      $.each (quizes, function (i, quiz) {
        var quizID = quiz.id;
        var status = 'incorrect';
        var multipleAnswer = false;
        var markSelectors;


        var result = true;
        switch (quiz.quizType) {
          case 'mc':
          case 'tf':
            var answer = quiz.answer;              
            var userAnswer = $('input[name='+quizID+']:checked').val();
            if (userAnswer == undefined)
            {
              alert('please select answer');
              notAnswered = true;
              return false;
            }
            quiz.userAnswer = userAnswer;
            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':
            var resultSet = checkQuizMatching(quiz.id);
            result = resultSet.result;
            markSelectors = resultSet.markSelectors;
          break;
        }

        currentQuizGroup = quizGroup[quiz.group];

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

        quiz.result = result;
        
        // mark result in group..
        $.each (currentQuizGroup.quizes, function (i, q) {
          if (q.page == currentPageID && q.quizID == quizID) {
            q.result = result;
            q.userAnswer = quiz.userAnswer;
            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';
          }  
        }        

        if (markSelectors != undefined) {
          $(markSelectors.join(',')).fadeIn();
          clog(markSelectors);
          if (status == 'correction') {
            $.each(markSelectors, function (i, m) {
              if (m.indexOf('-incorrect')) {
                var c = m.replace('incorrect', 'correction');
                $(c).fadeIn();
              }
            });
            // lock the drag
            $('#'+quizID+' .draggable').addClass('disabled');
          }
        } else {
          
          if (status == 'correction') {
            $('#'+quizID+' .correction').fadeIn();

            var sign = $('#'+quizID+' .incorrect');
            sign.fadeIn();            

            if (sign.hasClass('timeout')) {
              setTimeout(function() {
                sign.fadeOut();
              }, 2000);
            }

          } else {
            var sign = $('#'+quizID+' .'+status);
            sign.fadeIn();

            if (sign.hasClass('timeout')) {
              setTimeout(function() {
                sign.fadeOut();
              }, 2000);
            }

            if (currentQuizGroup.maxTry != 0 && status == 'incorrect') {
              // show try again message
              var retry = $('#'+quizID+' .retry');
              retry.fadeIn();

              if (retry.hasClass('timeout')) {
                setTimeout(function() {
                  retry.fadeOut();
                }, 2000);
              }
            }
          }          

          if (status != 'incorrect') {  // correction or correct       
            $('#'+quizID+' input, #'+quizID+' select')
              .attr('disabled', 'disabled');   

            if (answer != undefined) {
              $('#'+quizID+' input').not('[value='+answer+']')
                .closest('.moveable')
                .css('opacity', 0.7);
            }
          }
        }

        clog(status);
        $(document).trigger('quiz/checked', {quizID:quizID, quizGroup:quiz.group, quizType:quiz.quizType, status:status});

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

      if (notAnswered)
      { 
        return;
      } // endif;

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

        checkAllQuestionInGroupAnswered();

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

  
}

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

    if (modal.length) {
      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);

      // show modal manually
      modal.fadeIn();
    }

    $.each(appRoutes, function (i, el) {
      if (el.id == currentPageID) {        
        interactiveApp.LOProgress.set(el);
        return false;
      }
    });

  } else {
    clog('msi ad belum ');    
  }
}

function checkQuizMatching (quizID) {  
  var dropzones = $('#'+quizID+' .dropzone');

  var resultSet = {
    result: true,
    markSelectors: []
  };
  $.each(dropzones, function (i, el) {
    el = $(el);
    var index = el.attr('data-drag-target')
    if (el.attr('data-filled') != index) {
      resultSet.result = false;
      resultSet.markSelectors.push('#'+quizID+ '-incorrect-'+index);
    } else {
      resultSet.markSelectors.push('#'+quizID+ '-correct-'+index);
    }
  });

  return resultSet;
}

function initQuizResponse () {
  $('.correct, .incorrect, .correction, .retry').hide();
}

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

    var quizContainer = radios.closest('.quiz');
    if (quizContainer.hasClass('quiz-mc') || quizContainer.hasClass('quiz-tf') 
        || quizContainer.hasClass('quiz-dd') || quizContainer.hasClass('quiz-sa'))
    {
      quizContainer.on('change', 'input, select', function() {
        $('#quiz-submit-btn').removeAttr('disabled');
        quizContainer.off('change');
      }); 
    }
  }
}

function initQuizMatching () {
  $('#interactive-container .draggable').each(function (i, el) {
      el = $(el);
      el.data('orig-left', el[0].style.left);
      el.data('orig-top', el[0].style.top);
    }); // get the original positions  
}

function resetQuizData () {
  $.each(quizGroup, function (i, qg) {
    $.each(qg.quizes, function (j, q) {
      delete q.userAnswer;
      delete q.result;
    });
  });
}

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;
      // console.log(self.vid)

      // self.vid.controls = true;
      self.transcript.removeClass('active');

      self.videoController.on('click', function(evt) {
        evt.stopPropagation();
        if (self.vid.readyState < 2) {
          self.videoController.addClass('loading');
          self.vid.load();          
          return false;
        }
        if (self.vid.paused) {
          self.vid.play();
          self.videoController.css('opacity', 0);
        } else {
          self.vid.pause();
          self.videoController.css('opacity', 1);
        }    
        return false;
      });

      $(window).on('blur', function() {
        if (self.vid) {
          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(evt) {
        evt.stopPropagation();
        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() {
//       console.log(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) {
          //console.log('video is loading..');        
          self.videoController
            .css('opacity', 1)
            .addClass('loading');
      }
      // console.log(self);
      if (Modernizr.video)
        self.transcriptTrack = requestAnimationFrame(self.trackProgress.bind(self));    
    }
  }
}; // end VideOPlayer

jQuery.nl2br = function(varTest){
  return varTest.replace(/(\r\n|\n\r|\r|\n)/g, "<br>");
};