let nyc;

let beijing;

let rebgong;

​

let scale;

let imgScale;

let mapHeight;

​

let nycButton;

​

let showHighlight = false;

let highlightCity;

​

let s = "click to enlarge";

​

​

function preload() {

  mapBack = loadImage('MapBack.png');

  nyc = loadImage("NYC.png");

  beijing = loadImage("Beijing.png");

  rebgong = loadImage("Rebgong.png");

}

function setup() {

  scale = innerWidth/1842;

  mapHeight = innerWidth/1.86;

  imgScale = scale/5;

  print(scale);

  createCanvas(innerWidth, mapHeight);

  image(mapBack, 0, 0, innerWidth, mapHeight);

}

​

function draw() {

  background(255);

  image(mapBack, 0, 0, innerWidth, mapHeight);

  if (!showHighlight || highlightCity != "nyc"){

    drawNYC();

  }

   if (!showHighlight || highlightCity != "reb"){

    drawReb();

   }

   if (!showHighlight || highlightCity != "bei"){

    drawBei();

   }

  if (showHighlight){

    drawHightlight(highlightCity);  

  } else {

    fill(255);

  textSize(20);

  if (textWidth(s) > innerWidth){

    textSize(14);

  }

  text(s, (innerWidth - textWidth(s))/2, mapHeight * .95);

  }

​

}

​

function mousePressed(){

  if (mouseY > mapHeight) {

    return;

  }

  if (showHighlight){

    showHighlight = false;

    return;

  }

  if (mouseX < innerWidth * .4){

    print("clicked NYC");

    showHighlight = true;

    highlightCity = "nyc";

  } else if ( mouseX >= innerWidth *.4 && mouseX <= innerWidth* .65) {

    print("clicked rebgong");

    showHighlight = true;

    highlightCity = "reb";

  } else {

    print("clicked Beijing");

    showHighlight = true;

    highlightCity = "bei";

  }

}

​

function drawNYC(){

  image(nyc,innerWidth*.1,mapHeight*.4, nyc.width*imgScale, nyc.height*imgScale);

}

​

function drawReb(){

  image(rebgong, innerWidth*.53, mapHeight*.35, rebgong.width*imgScale,rebgong.height*imgScale);

}

​

function drawBei(){

  image(beijing, innerWidth*.8, mapHeight*.2, beijing.width*imgScale, beijing.height*imgScale);

}

​

function drawHightlight(city){

  var scaledWidth;

  if (city == "nyc"){

    scaledWidth = mapHeight * nyc.width / nyc.height;

    image(nyc, innerWidth/2 - scaledWidth/2, 0, scaledWidth, mapHeight);

  } else if (city == "reb"){

    scaledWidth = mapHeight * rebgong.width / rebgong.height;

    image(rebgong, innerWidth/2 - scaledWidth/2, 0, scaledWidth, mapHeight);

  } else if (city == "bei"){

    scaledWidth = mapHeight * beijing.width / beijing.height;

    image(beijing, innerWidth/2 - scaledWidth/2, 0, scaledWidth, mapHeight);

  }

}

​

function windowResized() {

  scale = innerWidth/1842;

  mapHeight = innerWidth/1.86;

  imgScale = scale/5;

  resizeCanvas(innerWidth, mapHeight);

}