var $jq = jQuery.noConflict();
$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"); 
});
var _mgr;
var _w,_h; 
var poi01 = {
  x: 252,
  y: 144,
  id: "Poi01",
  img: null,
  _img: null,
  area: function(){
      let square = {
      x1: this.x+random(-1, 1),
      y1: this.y+random(-1, 1),
      x2: this.x-7+random(-1, 1),
      y2: this.y+7+random(-1, 1),
      x3: this.x+7+random(-1, 1),
      y3: this.y+7+random(-1, 1)
    }
    let delta=0;
    if(mouseX >= square.x2 && mouseX <= square.x3 && mouseY >= square.y1 && mouseY <= square.y3){
      delta = delta + 5;
    }
    square.y1-=delta;
    square.x2-=delta;

    square.y2+=delta;
    square.x3+=delta;
    square.y3+=delta;
    return square; 
  },
  pin: function(){
    let square = this.area();

    if(this.overMe()){
      return  image(this._img, square.x1,square.y1 ); 
    }
    return image(this.img, square.x1,square.y1 ); 
  },
  adapt: function(){
   // this.img.resize(20, 20);
    //this._img= Object.assign({},this.img));

    //this._img.resize(50, 50);
  },
  setIcon: function(filename){
    //small
    this.img=loadImage(filename,
      function(img){
        img.resize(20,20);
      });  
    //big
    this._img=loadImage(filename,
      function(img){
        img.resize(50,50);
      });
  },
  overMe: function(){
    let square = this.area();  
    return (mouseX >= square.x1 && mouseX <= (square.x1+this.img.width) && mouseY >= square.y1 && mouseY <= (square.y1+this.img.height));
  }
};

var pois=[];
   
function setup()
{
  createCanvas(600, 500);
  console.log("STARTED");
  var poi=Object.create(poi01);

  poi.x= 346;
  poi.y= 332;
  poi.id="First One";
  poi.setIcon('icona_testo.png');
  pois.push(poi);

  poi=Object.create(poi01);
  poi.x= 746;
  poi.y= 432;
  poi.id="Two";
  poi.setIcon('icona_testo.png');
  pois.push(poi);
   _mgr = new SceneManager();
  _w = 1270
  _h = 520

  // Preload scenes. Preloading is normally optional
  // ... but needed if showNextScene() is used.
  _mgr.addScene ( Screensaver );
  _mgr.addScene ( River );

  console.log("Try to display screensaver");
  _mgr.showScene(Screensaver);
}

function draw()
{
    _mgr.draw();
}

function mousePressed()
{
    _mgr.handleEvent("mousePressed");
}

function mouseClicked()
{
    _mgr.handleEvent("mouseClicked");
}