var langValues;  
(function($){
$.fn.gmCreateMap = function(options){
  options = $.extend({
    langValues: {
      type: 'de',
      calcRoute: 'Route berechnen',
      calcRouteButton : 'Route berechnen',
      directionFrom: 'Von',
      directionTo: 'Nach'
    }    
 }, options);
      
  var mapCounter = 0;  
  var geocoder;
  var mapOptions;
  var isInit = false;
  var init = function(){
    if (!isInit){
      isInit = true;
      geocoder = new google.maps.Geocoder();
      mapOptions = {
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
          position: google.maps.ControlPosition.TOP_RIGHT
        },

        navigationControl: true,
        navigationControlOptions: {
          style: google.maps.NavigationControlStyle.ZOOM_PAN
        },
        zoomControl: false,
        zoomControlOptions: {
          style: google.maps.ZoomControlStyle.LARGE,
          position: google.maps.ControlPosition.LEFT
        },

        scaleControl: false,      
        scaleControlOptions: {
          position: google.maps.ControlPosition.BOTTOM_RIGHT
        }

      };
    }
  }
  function createTemplate(){
    var wrapper = $('<div style="float:left; padding-left:10px;width: 640px;" class="grid-row" />')
        .append('<div class="gmForm" style="float:left; width:100%; margin-bottom:10px;"/>')
      //.append('<div class="border" />')
      .append('<div class="gmMap" />')
      //  .append('<div class="border" style="display:none;clear:both;" />')
      .append('<div class="gmRoute" />');
    return wrapper;
  }
  function singleMap(el){
    mapCounter += 1;
    el.mapId = 'map_'+mapCounter;
    el.currentInput = false;
    el.output = $(el).find('.gmOutput');
    el.output.addClass('grid-row');
    el.output.append(createTemplate);
    el.output.find('.gmMap:first').attr('id', el.mapId);
    el.output.find('.gmRoute:first').attr('id', el.mapId+'_panel');
    
    
    el.addresses = $(el).find('.addresses');
    el.addresses.css('display', 'none');
    //el.firstAddress = 'Kaiserau 2 51789 Lindlar, Deutschland'; //$(addresses).text();
    el.firstAddress = $.trim(el.addresses.text());
    
    var formular = getFormular(el);
    el.startpoints = getStartPoints(el);
    var startPointCounter = el.startpoints.length;
    if (startPointCounter >0){
      var buttonsWrapper = formular.find('.startpointButtons:first');
      for (var i=0; i< startPointCounter; i++){
        var item = el.startpoints[i];
        buttonsWrapper.append(createStartpointButton(item));
      }
    }
    el.output.find('.gmForm').append(formular);  
    
    getMap(el);
    
    $(formular).find('.changeInputs').click(function(){
      var start = $(formular).find('.start');
      var end    = $(formular).find('.destination');
      el.currentInput = changeFields(start, end);
      var start = $(formular).find('.start').val();
      var end    = $(formular).find('.destination').val();
      calcRoute(el, start, end);
    })
    
    $(formular).find('.setInput').click(function(e){
      var inputField  = $(formular).find('.start');
      if (inputField.attr('disabled') == 'disabled'){
        inputField    = $(formular).find('.destination');
      }
      var value = $(this).attr('address');
      setInput(el.currentInput, value);
      
      var start = $(formular).find('.start').val();
      var end    = $(formular).find('.destination').val();
      calcRoute(el, start, end);
    })
      
      
    el.currentInput = $(formular).find('.start');
    $(formular).find('.destination')
      .attr('disabled', 'disabled')
      .val(el.firstAddress);
    $(formular).bind('submit', function(){
      var start = $(this).find('.start').val();
      var end    = $(this).find('.destination').val();
      calcRoute(el, start, end);
      return false;
    })    
    
  };
  function getDirectionsService(el){
    if (el.directionsService == null){
      el.directionsService = new google.maps.DirectionsService();
    }
    return el.directionsService;
  }
  function getDirectionsRenderer(el){
    if (el.DirectionsRenderer == null){
      el.DirectionsRenderer = new google.maps.DirectionsRenderer();
      el.DirectionsRenderer.setMap(el.map);
        el.DirectionsRenderer.setPanel(document.getElementById(el.mapId+'_panel'));

    }
    return el.DirectionsRenderer;
  }
  function calcRoute(el, start, end){
    var directionsService = getDirectionsService(el); // new google.maps.DirectionsService();
    var directionsDisplay = getDirectionsRenderer(el);
    //directionsDisplay = new google.maps.DirectionsRenderer();
        
      //var start = document.getElementById("start").value;
      // var end = document.getElementById("end").value;
      var request = {
         origin:start, 
         destination:end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      directionsService.route(request, function(result, status) {
          if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(result);
          }
      });
  };
  function setMarker(address){
    var image = new google.maps.MarkerImage('/fileadmin/templates/gmaps/gmaps-marker-icon.png',new google.maps.Size(50, 40),new google.maps.Point(0,0),new google.maps.Point(0, 40));
    var shadow = new google.maps.MarkerImage('/fileadmin/templates/gmaps/gmaps-marker-icon-shadow.png',new google.maps.Size(50, 40),new google.maps.Point(0,0), new google.maps.Point(0, 40));
  };
  function getMap(el){
    if (el.map == null){
      var curOptions = mapOptions;
      //  curOptions.center = codeAddress(el.firstAddress);
      var gmWrapper = $('#'+el.mapId);
        gmWrapper.css('height', '400px');
        gmWrapper.css('width', '100%');
        gmWrapper.css('margin', '10px 0');
        gmWrapper.css('padding-top', '10px');
        gmWrapper.css('border-top', '1px dotted #e6e6e6');
      el.map = new google.maps.Map(document.getElementById(el.mapId), curOptions);
      
      var image = new google.maps.MarkerImage('/fileadmin/templates/gmaps/gmaps-marker-icon.png',new google.maps.Size(50, 40),new google.maps.Point(0,0),new google.maps.Point(0, 40));
      var shadow = new google.maps.MarkerImage('/fileadmin/templates/gmaps/gmaps-marker-icon-shadow.png',new google.maps.Size(50, 40),new google.maps.Point(0,0), new google.maps.Point(0, 40));

      codeAddress(el.firstAddress, function(results){
        el.map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map: el.map, 
          position: results[0].geometry.location,
          shadow: shadow,
          icon: image
        });
      })
    }
    return el.map;
  }
  function codeAddress(address, callback) {
    if (geocoder) {
       geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (callback != null){
            callback(results);
          }
              } else {
          alert("error: " + status);
              }
            });
     }
  }
  function getFormular(el){
    if (el.formular == null)
    {
      el.formular = createFormular();
    }
    return el.formular;
  }
  
  var getStartPoints = function(el){
    var startPoints = new Array();
    $(el).find('.startPoint').each(function(){
      var startPoint = {};
      startPoint.img = $(this).children('dt:first').children('img:first').attr('src');
      startPoint.title = $(this).children('dd.title:first').html();
      startPoint.address = $(this).children('dd.address:first').html();
      startPoints.push(startPoint);
      $(this).empty();
    });
    return startPoints;
  };
  var createStartpointButton = function(item){
    var button = $('<div class="setInput" style="cursor:pointer;width: 40%; float:left;height: 32px; margin-right: 8px;line-height: 32px; " />');
    button.append('<img src="'+item.img+'" width="16" style="margin-right: 4px;" />')
      .append('<span style="position:relative; top: -4px;">'+item.title+'</span>');
    button.attr('address', item.address);
    return button;
    
  }
  
  var createFormular = function(){
    var wrapper = $('<div class="csc-default" style=" border-bottom: 2px dotted #E6E6E6;padding-bottom:10px;">');
    
    wrapper  .append('<h3 style="font-size:13px;">'+options.langValues.calcRoute+'</h3>')
      .append($('<div style="width:100%;float:left">')
        .append($('<div style="width:100%;float:left">')
                .append($('<div  style="float:left;  clear:both;width:100%;margin-bottom:7px;"><div style="margin-left: 10%;" class="startpointButtons"></span></div>'))
                
        )
        .append($('<div style="width:94%;float:left">')
                .append($('<label style="float:left; clear:both;width:100%;margin-bottom:7px;"><span style="width:10%;float:left; display:block;">'+options.langValues.directionFrom+': </span><input type="text" class="start" style="width:88%;float:right;"></label>'))
                .append($('<label style="float:left; clear:both;width:100%;margin-bottom:7px;"><span style="width:10%;float:left; display:block;">'+options.langValues.directionTo+': </span><input type="text" class="destination" style="width:88%;float:right;"></label>'))
        )
        .append($('<div style="width:5%; float:right;">')
                .append($('<div class="changeInputs" ><span class="icon" style="float:right;"></span></div>'))
        )
      )
      .append($('<p style="text-align:right; width:94%;"><input type="submit" value="'+options.langValues.calcRouteButton+'"></p>'));
    wrapper = $('<form>').append(wrapper);
    return wrapper;
    //return '<form>'+wrapper+'</form>';
  }
  
  function setInput(field, address){
    field.val(address);
    
   }
  function changeFields(field1, field2){
    var tempFieldValue  = field1.val();
    field1.val(field2.val());
    field2.val(tempFieldValue);
    if (field1.attr('disabled'))  {
      field1.removeAttr('disabled'); //, false);
      currentInput = field1;
    }
    else {
      field1.attr('disabled', 'disabled');
    }
    if (field2.attr('disabled'))  {
      field2.removeAttr('disabled'); //,'disabled');
      currentInput = field2;
    }
    else          {
      field2.attr('disabled', 'disabled');
    }
    
    return currentInput;
  }
  
  return this.each(function(){
    init();
    singleMap(this);
    
  })  
  
}
  
var mapLangValues = {
  'de': {
      type: 'de',
      calcRoute: 'Route berechnen',
      calcRouteButton : 'Route berechnen',
      directionFrom: 'Von',
      directionTo: 'Nach'  
  },
   'en': {
      type: 'en',
      calcRoute: 'Calculate route',
      calcRouteButton : 'Calculate route',
      directionFrom: 'From',
      directionTo: 'To'   
   }
};
$(document).ready(function() {  
  var langKey = 'de';
  if ($('body').hasClass('lang_1')){
    langKey= 'en';
  }
  var gmPath = 'http://maps.google.com/maps/api/js?sensor=false&async=2&callback=placeMap';
  gmPath += '&language='+langKey;
  //if (navigator.language == 'de' || navigator.language == 'de_de'){
  //  gmPath += '&language=de';
  //}
  //console.log(navigator);
  //$.getScript('http://maps.google.com/maps/api/js?sensor=false&async=2&callback=placeMap&language=de', function() {
  $.getScript(gmPath);
  langValues = mapLangValues[langKey]
})
})(jQuery);


// wird grebaucht um die gmInstanz erst zu starten wenn googleMaps geladen ist
function placeMap(){
  jQuery('.googleMaps').gmCreateMap({langValues:langValues});
}