$(document).ready(function(){

    //gettingStartedExample();
    $('#gettingstarted-code').text(gettingStartedExample.toString());
    !function ($) { $(function(){ window.prettyPrint && prettyPrint() })}(window.jQuery);
});

$(document).ready(function(){

    $('#introver-nav').click(function(){
        $('#api-menu > li').removeClass('active');
        $('#introver-nav').parent().addClass('active');
        $('#api-content').html($('#introver-api').html());
    });
    $('#engine-nav13').click(function(){
        $('#api-menu > li').removeClass('active');
        $('#engine-nav13').parent().addClass('active');
        $('#api-content').html($('#engine-api13').html());
    });
    $('#rest-navcluster').click(function(){
        $('#api-menu > li').removeClass('active');
        $('#rest-navcluster').parent().addClass('active');
        $('#api-content').html($('#rest-apicluster').html());
    });
    $('#engine-nav12').click(function(){
        $('#api-menu > li').removeClass('active');
        $('#engine-nav12').parent().addClass('active');
        $('#api-content').html($('#engine-api12').html());
    });
    $('#availability-nav').click(function(){
        $('#api-menu > li').removeClass('active');
        $('#availability-nav').parent().addClass('active');
        $('#api-content').html($('#availability-api').html());
    });
    $('#pricing-nav').click(function(){
      $('#api-menu > li').removeClass('active');
      $('#pricing-nav').parent().addClass('active');
      $('#api-content').html($('#pricing-api').html());
    });
    $('#browser-nav').click(function(){
      $('#api-menu > li').removeClass('active');
      $('#browser-nav').parent().addClass('active');
      $('#api-content').html($('#browser-api').html());
    });
    $('#rest-nav13').click(function(){
        $('#api-menu > li').removeClass('active');
        $('#rest-nav13').parent().addClass('active');
        $('#api-content').html($('#rest-api13').html());
      });
    $('#rest-nav12').click(function(){
        $('#api-menu > li').removeClass('active');
        $('#rest-nav12').parent().addClass('active');
        $('#api-content').html($('#rest-api12').html());
      });
     $('#googlemaps-nav').click(function(){

        $('#tutorial-menu > li').removeClass('active');
        $('#googlemaps-nav').parent().addClass('active');
        $('#tutorial-content').html(' \
                <h3 style="color:white">10km Isodistance on Google Maps</h3> \
        		<div><img src="nimages/isoLubianaGoogle.png" style="width: 900px"></img></div> \
                <p class="text-justify lead">Code with explanations:</p> \
        		<pre class="prettyprint" id="googlemapsExample"></pre>');

/*
        $('#tutorial-content').html(' \
                <h3 style="color:white">10km Isodistance on Google Maps</h3> \
        		<div id="google-maps-map"></div> \
                <p class="text-justify lead">Code with explanations:</p> \
                <pre class="prettyprint" id="googlemapsExample"></pre>');

        googlemapsExample();
*/        
       $('#googlemapsExample').text(googlemapsExample.toString());
       !function ($) { $(function(){ window.prettyPrint && prettyPrint() })}(window.jQuery);
    });

  $('#leafletmaps-nav').click(function(){

    $('#tutorial-menu > li').removeClass('active');
    $('#leafletmaps-nav').parent().addClass('active');

/*    
    $('#tutorial-content').html(' \
                <h3 style="color:white">10min Isochrone on Leaflet</h3> \
                <div id="leaflet-maps-map"></div> \
                <p class="text-justify lead">Code with explanations:</p> \
                <pre class="prettyprint" id="leafletExample"></pre>');

    leafletExample();
*/    
    $('#tutorial-content').html(' \
            <h3 style="color:white">10min Isochrone on Leaflet</h3> \
    		<div><img src="nimages/isochroneLubiana.png" style="width: 900px"></img></div> \
            <p class="text-justify lead">Code with explanations:</p> \
            <pre class="prettyprint"> \
            <p>First we need to import all the mandatory javascript and css files.</p> \
            &lt;!--  Leaflet --&gt; <br>\
            &lt;link rel=&quot;stylesheet&quot; href=&quot;http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css&quot;/&gt; <br> \
            &lt;script src=&quot;http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js&quot;&gt;&lt;/script&gt; <br>\
            &lt;!-- Iso4App library with a trial key --&gt; <br>\
            &lt;script src=&quot;http://www.iso4app.net/api/js?v=1.3&amp;lkey=87B7FB96-83DA-4FBD-A312-7822B96BB143&quot;&gt;&lt;/script&gt; <br>\
    		</pre> \
            <pre class="prettyprint" id="leafletExample"></pre>');

    $('#leafletExample').text(leafletExample.toString());
    !function ($) { $(function(){ window.prettyPrint && prettyPrint() })}(window.jQuery);
  });

  $('#usingtoolbar-nav').click(function(){

    $('#tutorial-menu > li').removeClass('active');
    $('#usingtoolbar-nav').parent().addClass('active');

    $('#tutorial-content').html(' \
                <h3 style="color:white">Using iso4app toolbar</h3> \
                <div id="google-maps-toolbar-map"></div> \
                <p class="text-justify lead">Code with explanations:</p> \
                <pre class="prettyprint" id="toolbarExample"></pre>');

    toolbarExample();
    $('#toolbarExample').text(toolbarExample.toString());
    !function ($) { $(function(){ window.prettyPrint && prettyPrint() })}(window.jQuery);
  });

    $('#errorHandling-nav').click(function(){

        $('#tutorial-menu > li').removeClass('active');
        $('#errorHandling-nav').parent().addClass('active');

        $('#tutorial-content').html(' \
                <h3 style="color:white">Handling errors returned from the server</h3> \
                <div class="row"> \
                <div class="col-md-12"> \
                        <p class="lead"> \
                          Every time you invoke the <code>getIsoline</code> method, it returns an <code>Isoline</code> object in which you find the errcode and errmsg properties.<br/>\
                          errcode value "0"  means that the method is completed successfully, otherwise you will find the error reason into the errmsg property\
                        </p>\
                </div> \
                ');
    });

  $('#apikey-submit').on('click', function(){

    $('#apikey-submit').prop('disabled', true);
    $("#api-key-result-success").hide();

    var url = tagScriptSrc+"/internalService.jsp?service=1025&name="+encodeURIComponent($("#name").val())+"&surname="+encodeURIComponent($("#lastname").val())+"&email="+encodeURIComponent($("#email").val());
    var xhr = createCORSRequest('GET', url);
    if (xhr) {
      xhr.onload = function() {
        console.log(xhr.responseText);
        $("#api-key-result-success").show();
        $("#api-key-result-success-text").html(xhr.responseText);
        $('#apikey-submit').prop('disabled', false);
      };
      xhr.onerror = function() {
        console.log("[iso4app] error during CORS request!!");
        $('#apikey-submit').prop('disabled', false);
      };

      try {
        xhr.send();
      } catch(err) {
        console.log("[iso4app] error during CORS request: "+err);
      }
    } else {
      console.log("iso4app -> CORS not supported");
    }


  });

 

  //thanks to Nicholas Zakas
  function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
      xhr.open(method, url, false);
    } else if (typeof XDomainRequest != "undefined") {
      xhr = new XDomainRequest();
      xhr.open(method, url);
    } else {
      xhr = null;// CORS is not supported by the browser.
    }
    return xhr;
  }


});