var $jq = jQuery.noConflict();
var timeRef=Date.now();
var state = 0;
var oldJQueryEventTrigger = jQuery.event.trigger;

function resetTimer(){
  timeRef=Date.now();
}

jQuery.event.trigger = function( event, data, elem, onlyHandlers ) { 
  console.log("RESTTO TIMER"); 
  resetTimer();
  oldJQueryEventTrigger( event, data, elem, onlyHandlers ); 
}

function addPin(poi,i){
  if(!poi.isFixed()){
     do{
      // poi.x = 346;
      // poi.y = 332;
       poi.x=Math.floor(Math.random() * 1200);
      poi.y=Math.floor(Math.random() * 700);
    }while(!isFree(poi,i));
  }
 // var img = $jq('<img id="pin_'+i+'" src="asset/i_'+poi.cat+'_48.png" style="position:absolute;left:'+Math.floor(Math.random() * 1200)+'px;top:'+Math.floor(Math.random() * 700)+'px; display: block;visibility: visible;"/>');
  var img = $jq('<img id="pin_'+i+'" src="asset/i_'+poi.cat+'_48.png" class="river" style="position:absolute;left:'+Math.floor($jq(window).width()/2)+'px;top:'+Math.floor($jq(window).height()/2)+'px; display: block;visibility: visible;"/>'); 
  img.click(function(){ // handle click
    var c = $jq("#container_" + poi.type);

    if(poi.type=='T'){ //contenuto testuale
      $jq.get("contents/"+poi.type+"_"+i+".html", function(html_string)
         {
            c.html('<div class="scrollable-content" id="sub_v">' + html_string + '</div>'); 
         },'html');
    }else if(poi.type=='V'){//contenuto video 
      c.html('<source src="contents/'+poi.type+'_'+i+'.mp4" type="video/mp4" />');  
      c.attr('currentTime',"0");
      c.trigger('load');
      c.trigger('play');
    }else{//è un'immagine
      c.html('<img src="contents/'+poi.type+'_'+i+'.jpg"/>');  
    }
    c.modal();
  }); 
//          $jq('body').delay(Math.floor(Math.random() * 1001)).append( img );
// $jq('body').append('').delay(2000).queue(function (next) {
    // $jq(this).append(img);
    // next();
// });
  $jq('body').append( img );
  img.delay(500);
  img.animate({top:   poi.y + 'px'},'fast');
  img.animate({left:  poi.x + 'px'},'fast');

}



function toScsv(){
    state=0;
    $jq.get("asset/scsv.html", function(html_string){
            var body = $jq('body');
            body.html(html_string);

// Wrap every letter in a span
anime.timeline({loop: true})
  .add({
    targets: '.ml15 .word',
    scale: [14,1],
    opacity: [0,1],
    easing: "easeOutCirc",
    duration: 800,
    delay: (el, i) => 800 * i
  }).add({
    targets: '.ml15',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });

            $jq("#myVideo").on( "click", function(){toRiver();} )
            $jq(".ml15").on( "click", function(){toRiver();} )
            $jq(".mword").on( "click", function(){toRiver();} )

    },'html');
}
function toRiver(){
    state=1;
    $jq.get("asset/river.html", function(html_string){
            var body = $jq('body');
            body.html(html_string);
             $jq('input').each(function(){
              var self = $jq(this),
                label = self.next(),
                label_text = label.text();

              label.remove();
              self.iCheck({
                checkboxClass: 'icheckbox_line-purple',
                radioClass: 'iradio_line-purple',
                insert: '<div class="icheck_line-icon"></div>' + label_text
              });
            });
            //fisso i bottoni  ad una certa larghezza
            $jq( "div[class^='icheckbox_line']" ).css( "max-width", "200px" );
            // sposto i bottoni in alto a dx ma relativamente al loro container
            $jq('ul').css({ 
              position: "absolute",
              marginLeft: 0, marginTop: 0,
              top: 0, left: 0
            });
            //aggiungo l'on clicked alle checkbox
            $jq('input').on('ifChecked', function(event){
              for (let i=0; i<pois.length; i++) {

                var img = null;
                if(this.id == pois[i].cat){
                  addPin(pois[i],i);
                }
              }
              //qui ci va un foreach suoi poi 
                    });

            $jq('input').on('ifUnchecked', function(event){
              //qui ci va un foreach suoi poi 
              for (let i=0; i<pois.length; i++) {
                if(this.id == pois[i].cat){
                  $jq('#pin_'+i).remove();
                }
              }
            });
          
            $jq( "[id^='container_']" ).on($jq.modal.AFTER_CLOSE, function(event, modal) {
              modal.$elm.html('');
            });
             for (let i=0; i<pois.length; i++) {
               if($jq('#' + pois[i].cat).is(":checked")) {
                addPin(pois[i],i);
               }
             }

         },'html');
 }

function isFree(poi,j){
  
   for (let i=0; i<pois.length; i++) {
     if(i==j){
      continue;
     }

    if(pois[i].isOverlappedToPoi(poi)){
      return false;
    }
   }
  //[0,0,156,188] check if overlapped with checkboxes rectangle
  return !poi.isOverlapped([0,0,156,188]);
}

$jq( document ).ready(function() {
    console.log( "ready!" );
    var b = $jq("body"); 
    b.css("margin-top", "0px");
    b.css("margin-left", "0px");
    b.css("margin-right", "0px");
    b.css("margin-bottom", "0px");
    $jq(".modal").css("width","auto"); 
  //disable all
//  $jq('.river').hide();
 //   toRiver();
    toScsv();
    $jq('body').mousemove(function(event){
      console.log("RESTTO TIMER"); 
    });
   // $jq('#container_T').on($jq.modal.AFTER_CLOSE, function(event, modal) {
      // modal.$elm.html('');
    // });
});

var intervalId = setInterval(function() {
  if(Date.now()-timeRef>=30000 && state==1){
    toScsv();
  }
}, 5000);