var $jq = jQuery.noConflict();

function addPin(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" 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');

}

$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"); 
    
    $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);
       }
     }
    // $jq('#container_T').on($jq.modal.AFTER_CLOSE, function(event, modal) {
      // modal.$elm.html('');
    // });
});