var script_url = "https://www.koelner-stadtteile.de/scripts";

var layers_url = "https://www.koelner-stadtteile.de/scripts/map_data.php?c=HipgCRRShSkosrz2Dquc&id=";
var cgn_center = "50.937430,6.960326";
//var ts_url = "http://www.koelner-stadtteile.de/scripts/tstationen-js.php";




jQuery(document).ready(function($) {

});



var map;
var kmlLayer = new Array();
var zoomlevel = 11;  //11
var cgn_center;
var ctaLayer;
var last_layer_id = 0;
var auto_marker = false;
var directionsDisplay;
var directionsService;
var trafficLayer = null;
var advert_markers = [];
var layer_map;
var info_geocoder;
var infowindow;
var info_marker = [];
var adr_marker = -1;

function create_map (obj_id,sent) {


  cgn_center = new google.maps.LatLng(50.937430,6.960326);

  var mapProp = {
        center: cgn_center,
        zoom: zoomlevel,
        zoomControl: true,
        zoomControlOptions: {
                             style: google.maps.ZoomControlStyle.MEDIUM
        },

        mapTypeId: google.maps.MapTypeId.ROADMAP
      };

   map = new google.maps.Map(document.getElementById(obj_id) ,mapProp);

   if( jQuery('#map_showhide').prop("checked") == false) {
     set_basic_layer();
   }

   cgn_center = map.getCenter();


   google.maps.event.addListener(map, 'click', function(event) {
     get_click_pos(event);
   });

  directionsDisplay = new google.maps.DirectionsRenderer();
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById("dirpanel"));


  //===== Traffic-Button =================================
  var controlDiv = document.createElement('DIV');
  jQuery(controlDiv).addClass('gmap-control-container').addClass('gmnoprint');

  var controlUI = document.createElement('DIV');
  jQuery(controlUI).addClass('gmap-control');
  jQuery(controlUI).text('Verkehr');
  jQuery(controlDiv).append(controlUI);

  var legend = '<ul>'
             + '<li><span style="background-color: #30ac3e">&nbsp;&nbsp;</span><span style="color: #30ac3e"> &gt; 80 km/h</span></li>'
             + '<li><span style="background-color: #ffcf00">&nbsp;&nbsp;</span><span style="color: #ffcf00"> 40 - 80 km/h</span></li>'
             + '<li><span style="background-color: #ff0000">&nbsp;&nbsp;</span><span style="color: #ff0000"> &lt; 40 km/h</span></li>'
             + '<li><span style="background-color: #c0c0c0">&nbsp;&nbsp;</span><span style="color: #c0c0c0"> Keine Daten ver&uuml;gbar</span></li>'
             + '</ul>';

  var controlLegend = document.createElement('DIV');
  jQuery(controlLegend).addClass('gmap-control-legend');
  jQuery(controlLegend).html(legend);
  jQuery(controlLegend).hide();
  jQuery(controlDiv).append(controlLegend);

  // Set hover toggle event
  jQuery(controlUI).mouseenter(function() {
        jQuery(controlLegend).show();
         })
         .mouseleave(function() {
            jQuery(controlLegend).hide();
         });

 trafficLayer = new google.maps.TrafficLayer();
 //trafficLayer.setMap(map);

 google.maps.event.addDomListener(controlUI, 'click', function() {
    if (typeof trafficLayer.getMap() == 'undefined' || trafficLayer.getMap() === null) {
        jQuery(controlUI).addClass('gmap-control-active');
        trafficLayer.setMap(map);
    } else {
        trafficLayer.setMap(null);
        jQuery(controlUI).removeClass('gmap-control-active');
    }
  });

  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);
  //===== Traffic-Button =================================


}



function set_basic_layer() {

   var noautozoom = true;

   if( jQuery('#autozoom').prop("checked") == true){
     noautozoom = false;
   }
   else
     noautozoom = true;

   ctaLayer = new google.maps.KmlLayer({
          url: layers_url+'Stadtteil-zugeordnet',     //url: layers_url+'Stadtteil-zugeordnet.kml'
          preserveViewport: noautozoom
   });

   ctaLayer.setMap(map);

   google.maps.event.addListener(ctaLayer, 'click', function(event) {
     get_click_pos(event);
   });


}





function set_layer(bezirk,ord_nr,typ) {

  var id;
  var noautozoom = true;
  var akt_url;

  if (typeof ord_nr === "undefined") {
    //Bezirk
    id = bezirk;
  }
  else {
    //Stadtteile
    id = ord_nr;
  }

   if( jQuery('#autozoom').prop("checked") == true){
     noautozoom = false;
   }
   else
     noautozoom = true;


  if( jQuery('#fixer').prop("checked") == true){
    remove_layer(last_layer_id,last_layer_id);
  }


  if(auto_marker) {
    remove_all_layers('');
  }

  last_layer_id = id;



  if(typ=="parking")
    akt_url = "https://www.koelner-stadtteile.de/scripts/koeln-parkhausbelegung.php?c=HipgCRRShSkosrz2Dquc";
  else
    akt_url = layers_url+id;


  kmlLayer[id] = new google.maps.KmlLayer({
           url: akt_url,
           preserveViewport: noautozoom
  });

  kmlLayer[id].setMap(map);


  if(typ=="parking") {
    google.maps.event.addListener(kmlLayer[id], 'click', function(kmlEvent) {

      setTimeout(function() {
        //var text = kmlEvent.featureData.description;

        var id = jQuery(".gm-style-iw a span").css("font-size","0px");
        var id = jQuery(".gm-style-iw a span").html();
        jQuery(".gm-style-iw a").css("cursor","pointer");

        jQuery('.parkinginfo').css('display','none');

        jQuery(".gm-style-iw a").click(function(e) {
           get_parking_info(id,e.pageX,e.pageY);
        });


      },100);


    });
  }

   google.maps.event.addListener(kmlLayer[id], 'click', function(event) {
     get_click_pos(event);
   });


   if( jQuery('#show_stadtteilinfo').prop("checked")==true && typ!="ssngle")     //typ!="ssngle": bei PLZ Stadtteil-Info immer ausblenden, da fehlerhafter Effekt.
     get_stadtteilinfo(id);


  // advertise_to_map(ord_nr);



}



function remove_layer(bezirk,ord_nr) {
  var id;

  if (typeof ord_nr === "undefined") {
    //Bezirk
    id = bezirk;
  }
  else {
    //Stadtteile
    id = ord_nr;
  }

  if (typeof kmlLayer[id] !== "undefined")
    kmlLayer[id].setMap(null);

  stadtteilinfo_deleteAll();

  //advertise_deleteAll();

}


function remove_all_layers(typ) {
  if( jQuery('#fixer').prop("checked") == false || typ=="auto_marker"){
    for (var key in kmlLayer) {
      kmlLayer[key].setMap(null);
    }
  }

  /*
  if(typ=="auto_marker") {
    auto_marker = true;
  }
  */
}


function reset_map() {
  remove_all_layers("auto_marker");
  map.setCenter(cgn_center);
  map.setZoom(zoomlevel);

  jQuery("#dirpanel").css("display","none");
  jQuery("#adr_input").val("");
  directionsDisplay.setMap(null);
  directionsDisplay.setPanel(null);
  directionsDisplay = null;
  directionsDisplay = new google.maps.DirectionsRenderer();
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById("dirpanel"));


  stadtteilinfo_deleteAll();
  layermap_delete();
  //advertise_deleteAll();

}



var end;
var start;
var clicked = false;

function get_click_pos(event) {
  end = event.latLng;
  start = jQuery("#adr_input").val();
  start = jQuery.trim(start);
  clicked = true;

  var tv_mode = "gas"; //jQuery("input[name=travelmode]:checked").val();



  if(tv_mode=="gas") {
    ts_check(end);
  }
  else
    generate_route_direction();




}

function set_new_travelmode() {
  if (clicked == true) {
    generate_route_direction();

  }
  jQuery("#gasBox").css("display","none");
}




//===================================================================
//===== Tankstellen-Funktionen ======================================
//===================================================================
var ts_sorte = "diesel";
var ts_radius = 1;
function init_gasstations() {
  jQuery("#gasBox").toggle(400);
}


function set_gasdata(obj) {
  ts_sorte = jQuery("input[name=gastype]:checked").val();
}

function ts_check(latlng) {

  if( jQuery("#ts-checker").is(":checked") ) {

    var cstr = String(latlng);
    cstr = cstr.substring(1, cstr.length-1);
    var coord_arr = cstr.split(", ");

    ts_radius = jQuery("#ts_radius_val").val();

    ts_sorte = jQuery("input[name=gastype]:checked").val();

    var parameter = "tankstellen_"+ts_sorte+"_"+ts_radius+"_"+coord_arr[0]+"_"+coord_arr[1];

    reset_map();
    jQuery.getScript( script_url +"/tstationen-js.php?p="+parameter);
  }

}

//=====================================================================



//===== Parking-Funktionen ============================================

//===== Parking Zusatzinfos =====
function get_parking_info(id,x,y) {

 jQuery.post("https://www.koelner-stadtteile.de/scripts/koeln-parkhausbelegung.php", {aktion: "get_parking_info", pid:id}, function(data) {
    jQuery('.parkinginfo p').html(data);
    jQuery('.parkinginfo').css("display","block");

    jQuery(".parkinginfo").offset({
      top: y+10,
      left: x+10
    });

 })


}


//=====================================================================



function generate_route_direction() {
  var travel_mode = google.maps.TravelMode.DRIVING;
  if(jQuery("input[name=travelmode]:checked").val()=="car")
    travel_mode = google.maps.TravelMode.DRIVING;
  if(jQuery("input[name=travelmode]:checked").val()=="bus")
    travel_mode = google.maps.TravelMode.TRANSIT;
  if(jQuery("input[name=travelmode]:checked").val()=="bike")
    travel_mode = google.maps.TravelMode.BICYCLING;

  //if(start=="")
    //alert("Bitte Startadresse eingeben.");
  if(start!="") { //Route Berechnen

    jQuery("#dirpanel").css("display","block");

    var waypts = [];
    var request = {
      origin:start,
      destination:end,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: travel_mode   // DRIVING, BICYCLING, TRANSIT, WALKING
    };

     directionsService = new google.maps.DirectionsService();
     directionsService.route(request, function(result, status) {
       if (status == google.maps.DirectionsStatus.OK) {
         directionsDisplay.setDirections(result);
       }
    });


  }
}





function toggle_map() {
  if( jQuery('#map_showhide').prop("checked") == false) {
    set_basic_layer();
    //layermap_delete();
  }
  else {
    ctaLayer.setMap(null);
    //layermap_show();
  }

}



function show_adr_pos() {

  var start = jQuery("#adr_input").val();
  start = jQuery.trim(start);

  if(start!="") { //Position zeigen
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode( {'address': start}, function (result, status) {
      if(status==google.maps.GeocoderStatus.OK) {
        //advertise_deleteAll();

         if(adr_marker!=-1)
           adr_marker.setMap(null);

         adr_marker = new google.maps.Marker({
                                              position: result[0].geometry.location,
                                              map: map,
                                              visible: true,
                                              title: start
                                           });
        //advert_markers.push(marker);
        //advertise_setAll(map);
      }
    });
  }
}



//===== Bezirk- u. Stadtteil-Info Links =====
function get_stadtteilinfo(ord_nr) {

  var url = script_url+"/map-links.php";

  if(ord_nr>99) {
    /*
    if(typeof info_marker != 'undefined') {
      info_marker.setMap(null);
    }
    */
    jQuery.getScript(url+"?k="+ord_nr);


  }

}


function stadtteilinfo_setAll(aktmap) {
  for (var i = 0; i < info_marker.length; i++) {
    info_marker[i].setMap(aktmap);
  }
}


function stadtteilinfo_deleteAll() {
  stadtteilinfo_setAll(null);
  info_marker = [];
}




//===== Zusatzlayer =====

var olMarker;
var olInfowindow;
function layermap_show(overlayImage,olBounds,olZoom,olOpacity,markerText) {

  layermap_delete();

  var ol_url = "https://www.koelner-stadtteile.de/maps/"+overlayImage;

  var ol_bounds_array = olBounds.split(","); //[0]=>Nord, [1]=>Ost, [2]=>Sued, [3]=>West


  var overlayOpts = {
                     opacity:olOpacity
                    }

  if(ol_bounds_array[0]>ol_bounds_array[2]) {
    var latDif = (ol_bounds_array[0] - ol_bounds_array[2]) / 2;
    var latCenter = parseFloat(ol_bounds_array[2]) + parseFloat(latDif);
  }
  else {
    var latDif = (ol_bounds_array[2] - ol_bounds_array[0]) / 2;
    var latCenter = parseFloat(ol_bounds_array[0]) + parseFloat(latDif);
  }
  if(ol_bounds_array[1]>ol_bounds_array[3]) {
    var lonDif = (ol_bounds_array[1] - ol_bounds_array[3]) / 2;
    var lonCenter = parseFloat(ol_bounds_array[3]) + parseFloat(lonDif);
  }
  else {
    var lonDif = (ol_bounds_array[3] - ol_bounds_array[1]) / 2;
    var lonCenter = parseFloat(ol_bounds_array[1]) + parseFloat(lonDif);
  }


  /*
  var nordost = new Array(50.971362,6.987515);
  var suedwest = new Array(50.904876,6.914169);

  var nordost = new Array(50.973105,6.996944);
  var suedwest = new Array(50.967362,6.990713);
  */

  var imageBounds = new google.maps.LatLngBounds(
                       new google.maps.LatLng( ol_bounds_array[2],ol_bounds_array[3]),
                       new google.maps.LatLng( ol_bounds_array[0],ol_bounds_array[1])
                    );

  layer_map = new google.maps.GroundOverlay(ol_url,imageBounds, overlayOpts);
  layer_map.setMap(map);

  map.setCenter(new google.maps.LatLng(latCenter,lonCenter));
  map.setZoom(olZoom);


  //===== Opac-Button =================================

  var opacControl = document.createElement('DIV');
  jQuery(opacControl).addClass('gmap-control-container').addClass('gmnoprint');
  jQuery(opacControl).attr("id","opacityControl");

  var controlUI = document.createElement('DIV');
  jQuery(controlUI).addClass('gmap-control');
  jQuery(controlUI).text('Transparenz');
  jQuery(opacControl).append(controlUI);

  var legend = 'Layer-Deckkraft'+
               '<div id="slider"></div>'+
               '0% <span style="padding:0 35px 0 54px;">50%</span> 100%';

  var controlLegend = document.createElement('DIV');
  jQuery(controlLegend).addClass('gmap-control-legend');
  jQuery(controlLegend).html(legend);
  jQuery(controlLegend).hide();
  jQuery(opacControl).append(controlLegend);

  // Set hover toggle event

  jQuery(controlUI).click(function() {
        jQuery(controlLegend).toggle();
  });



  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(opacControl);

  jQuery("#slider" ).slider( { min:0,
                             max:1,
                             step:0.1,
                             value:olOpacity,
                             slide: function(event, ui) {set_opac(ui.value)}
                             }

  );
  //===== Traffic-Button =================================


  if(markerText!="") {
    var pinIcon = new google.maps.MarkerImage(
      "http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png",
      null, /* size is determined at runtime */
      null, /* origin is 0,0 */
      null, /* anchor is bottom center of the scaled image */
      new google.maps.Size(40, 45)
    );


    olInfowindow = new google.maps.InfoWindow({ content: '<p class="ol_txtbox">'+markerText+'</p>' });
    olMarker = new google.maps.Marker({
                                        map: map,
                                        position: new google.maps.LatLng(latCenter,lonCenter),
                                        animation: google.maps.Animation.DROP,
                                        title: 'Weitere Infos',
                                        icon: pinIcon

                                });

    olInfowindow.open(map,olMarker);
  }



}

function layermap_delete() {
  if( typeof layer_map != 'undefined') {
    layer_map.setMap(null);
    var indexOfControl = null,
    bottomCenterControls = map.controls[google.maps.ControlPosition.TOP_RIGHT];
    bottomCenterControls.forEach( function ( element,
                                         index ) {
    if( element.id === 'opacityControl' ) {
      indexOfControl = index;
    }
    } );
    if( indexOfControl ) {
      bottomCenterControls.removeAt( indexOfControl );
    }
  }

  if( typeof olMarker != 'undefined') {
    olMarker.setMap(null);
  }

}


function set_opac(opacval) {
  layer_map.setOpacity(parseFloat(opacval));
  olInfowindow
}





//===== Advertising =====
function advertise_to_map(key) {

  jQuery.getScript(script_url+"/advertise.php?k="+key);

}

function advertise_setAll(aktmap) {
  for (var i = 0; i < advert_markers.length; i++) {
    advert_markers[i].setMap(aktmap);
  }
}


function advertise_deleteAll() {
  advertise_setAll(null);
  advert_markers = [];
}




//===========================================================
//===== jQuery Plugin for dragable DIV ======================
//===========================================================

(function($) {
    $.fn.drags = function(opt) {

        opt = $.extend({handle:"",cursor:"move"}, opt);

        if(opt.handle === "") {
            var $el = this;
        } else {
            var $el = this.find(opt.handle);
        }

        return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
            if(opt.handle === "") {
                var $drag = $(this).addClass('draggable');
            } else {
                var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
            }
            var z_idx = $drag.css('z-index'),
                drg_h = $drag.outerHeight(),
                drg_w = $drag.outerWidth(),
                pos_y = $drag.offset().top + drg_h - e.pageY,
                pos_x = $drag.offset().left + drg_w - e.pageX;
            $drag.css('z-index', 1000).parents().on("mousemove", function(e) {
                $('.draggable').offset({
                    top:e.pageY + pos_y - drg_h,
                    left:e.pageX + pos_x - drg_w
                }).on("mouseup", function() {
                    $(this).removeClass('draggable').css('z-index', z_idx);
                });
            });
            e.preventDefault(); // disable selection
        }).on("mouseup", function() {
            if(opt.handle === "") {
                $(this).removeClass('draggable');
            } else {
                $(this).removeClass('active-handle').parent().removeClass('draggable');
            }
        });

    }
})(jQuery);