var showTopper = true;

/************************************************************************************************************************************************************************************************************
 *
 * ONLOAD FUNCTION CALLS
 *
 ***********************************************************************************************************************************************************************************************************/
$(function() {
  $('#navopenbtn').click(function(e) {
    e.preventDefault();
    $('.offcanvas-nav').animate({ left: '+=600' }, 400, function() {});
//    $('header h1').animate({ left: '+=90' }, 400, function() {});
    $(this).addClass('invisible');
  });

  $('#navclosebtn').click(function(e) {
    e.preventDefault();
    $('.offcanvas-nav').animate({ left: '-=600' }, 400, function() {});
//    $('header h1').animate({ left: '-=90' }, 400, function() {});
    $('#navopenbtn').removeClass('invisible');
  });

  // toggle dei sottotitoli del videoalong
  $('.subtitlesHider').click(function(e) {
    e.preventDefault();
    $('.va_subTitlesDivContent').toggle();
    $(this).toggleClass('active');
  });
});

/************************************************************************************************************************************************************************************************************
*
* VIDEOALONG
* queste funzioni intervenendo sul css non possono che essere site specific
*
************************************************************************************************************************************************************************************************************/
function enterFullScreen(videoId, subTitlesTarget, feedbackDivId) {
  // NB il metodo fullScreenSupported pare non servire a nulla ed inoltre
  // - firefox: nasconde la barra dei comandi di jplayer
  // - chrome: inibisce il fullscreen!
//  if(fullScreenSupported(videoId, feedbackDivId) && subTitlesTarget) {
  if(subTitlesTarget) {
//    var offset = $('#'+subTitlesTarget).offset().left;

    var top = isExplorer ? '250px' : (isChrome ? '440px' : '540px');
    var screenWidth = screen.width;
    var width = (screenWidth-200) + 'px';
    var fontSize = '34px';
    var left = '-200px';

    if(screenWidth>=1600) {
      left = '-200px';
    } else if(screenWidth<1600 && screenWidth>=1280) {
      left = '-150px';
      top = '330px';
    } else if(screenWidth<1280 && screenWidth>=1152) {
      left = '-100px';
      top = '300px';
    } else if(screenWidth<1152 && screenWidth>=1024) {
      left = '-90px';
      top = '260px';
      width = (screen.width-150) + 'px';
    } else if(screenWidth<1024&& screenWidth>=800) {
      left = '-80px';
      top = '350px';
      width = (screenWidth-100) + 'px';
      fontSize = '24px';
    } else {
      left = '-100px';
    }

    $('#'+subTitlesTarget)
        .css('width', width)
        .css('left', left)
        .css('top', top)    /* in caso di presenza barra comandi */
        .css('background-color', 'transparent')
        .css('fontSize', fontSize)
        .css('color', '#FFF')
        .css('font-weight', 'bold')
        .css('z-index', 2147483647);
//      console.debug($('#'+subTitlesTarget));
  }
}


function exitFullScreen(isFullScreen, subTitlesTarget) {
  if(!isFullScreen) {
    $('#'+subTitlesTarget)
        .css('text-shadow', '2px 2px 6px #000000')
        .css('position', 'relative')
        .css('width', '470px')
        .css('padding-left', '10px')
        .css('top', '-160px')
        .css('min-height', '5px')
        .css('fontSize', '16px')
        .css('font-weight', 'bold')
        .css('color', '#FFF')
        .css('text-align', 'center')

//        .css('background-color', 'transparent')
      // per annullare formattazione full-screen
        .css('left', '0px')
        .css('z-index', 1);
  }
}


function highlightExercise($theElement, isRight) {
  var color = isRight ? '#53c21a' : '#c20000';
  if($theElement.attr('type')=='checkbox') {
    $theElement.wrap("<span style='background-color:' + color + ';'>");
    setTimeout( function(){ $theElement.unwrap(); }, 1500);

  } else {
    $theElement.css('backgroundColor', color).css('color', '#FFF');
    setTimeout( function(){ $theElement.css('backgroundColor', '').css('color', ''); }, 2000);
  }
}