
<div id="cartography-page" data-behavior="AostaCartography">
  <div class="page-header">
    <h2>
      <div class="icon-globe"></div>
      <?php echo t('Maps'); ?>
      <small> <span id="cartography-update-time"></span>
      </small>
    </h2>
  </div>
  <script language=javascript>

  var strutturaDati = [];

  function inizializza() {
    /*
    strutturaDati.push({key:"V01", x: 342463, y: 5073194, denominazione: "Varco 01 - Viale Monte Bianco", stato: 1, lastsignal: "2014-09-15", valori: [1, 12, 8, 4, 23, 32]});
    strutturaDati.push({key:"V02", x: 342510, y: 5073131, denominazione: "Varco 02 - Piazzale Chiesa", stato: 1, lastsignal: "2014-09-15", valori: [4, 32, 5, 5, 45, 23]});
    strutturaDati.push({key:"V03", x: 342493, y: 5072902, denominazione: "Varco 03 - Via Puchoz", stato: 0, lastsignal: "2014-09-15", valori: [6, 21, 9, 2, 76, 56]});
    strutturaDati.push({key:"V04", x: 342656, y: 5072740, denominazione: "Varco 04 - Via Marconi", stato: 1, lastsignal: "2014-09-15", valori: [2, 24, 11, 7, 33, 94]});
    strutturaDati.push({key:"V05", x: 342569, y: 5072801, denominazione: "Varco 05 - Via Donzelli", stato: 0, lastsignal: "2014-09-5", valori: [5, 25, 2, 3, 18, 12]});
    strutturaDati.push({key:"V06", x: 342528, y: 5072698, denominazione: "Varco 06 - Via Roma", stato: 1, lastsignal: "2014-09-15", valori: [0, 17, 5, 8, 19, 45]});
    strutturaDati.push({key:"V07", x: 342525, y: 5072771, denominazione: "Varco 07 - Vicolo Anziani", stato: 1, lastsignal: "2014-09-15", valori: [3, 32, 8, 12, 22, 55]});
    */
    var libSCT = document.getElementById("iframeId").contentWindow;
    libSCT.caricaElementi(strutturaDati)
  }

  function getImageCoords(event, img) {
    var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft - 848;
    var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop - 76;
    console.debug(posX, posY)

    var libSCT = document.getElementById("iframeId").contentWindow;
    var ritorno = libSCT.pointConvert(posX, posY)
    console.debug(ritorno)

    var scala = 6
    var sRef = "UTM-ED50"
    libSCT.ZoomPunto(ritorno[0], ritorno[1], scala, sRef)

  }

  function zoom() {
    var libSCT = document.getElementById("iframeId").contentWindow;

    var puntoX = 367345;
    var puntoY = 5059223;

    // eseguo ZOOM
    var scala = 6
    var sRef = "UTM-ED50"
    libSCT.ZoomPunto(puntoX, puntoY, scala, sRef)

  }

  function mark() {
    var libSCT = document.getElementById("iframeId").contentWindow;

    var puntoX = 376345;
    var puntoY = 5071223;

    // eseguo ZOOM
    var scala = 6
    var sRef = "UTM-ED50"
    libSCT.ZoomPunto(puntoX, puntoY, scala, sRef)
    libSCT.AddPoint("KEY001", puntoX, puntoY, "BP", true, sRef);

  }

  function pan() {
    var libSCT = document.getElementById("iframeId").contentWindow;

    var puntoX = 387345;
    var puntoY = 5069223;
    var sRef = "UTM-ED50"

    // eseguo PAN
    libSCT.PanPunto(puntoX, puntoY, sRef)

  }

  function carica(tipo) {
    if (tipo == 1) {
      strutturaDati[1].stato = 0;
      strutturaDati[3].stato = 0;
    }
    if (tipo == 2) {
      strutturaDati[0].valori = [1, 2, 3, 4, 3, 2];
    }
    var libSCT = document.getElementById("iframeId").contentWindow;
    libSCT.caricaElementi(strutturaDati);
  }

  window.onload = inizializza;

  </script>
  <iframe id="iframeId" style="height: 600px; width: 100%;"
    src="<?php echo(Yii::app()->baseUrl); ?>/iframes/cartography/GeoAped.php"></iframe>
</div>
