google.load("mootools", "1.2.4");
google.setOnLoadCallback(OnLoad);

function OnLoad(){

	var mapInfo = $('map-utility');
  var mapViewer = $('map-content');
  var formQ = $('q');
  var dataTrader = false;
  
  var url;
  var showMap;
  var mapMarkers = [];
  var mapHTMLS = [];
  var map;
  var baseIcon;
  var smallIcon;
  var geocoder;
  var key;
  var keyExample = 'z.B. Händler, Website, PLZ, Ort, Strasse';
  var webRegExp = /(^https?:\/\/)?(.*)/;
  var statusTrader = Array(
    Array('Kein Humax Händler','<ul><li>keine Österreich-Garantie!</li><li>keine österreichische Software!</li><li>keine ORF/TÜV-Lizenz!</li><li>keinen Humax-Support!</li><li>keinen Humax-Service!</li><li>keine geschulte Beratung!</li><li>keine fachgerechte Installation!</li></ul>'),
    Array('Humax Premium Händler','<p>Beratung + Installation<br />Service + Zustellung</p>'),
    Array('Humax Premium Plus Händler','<p>Präsentation + Beratung + Installation<br />Service + Support + Zustellung</p>')
  );
  var traderRegistrationSubject = 'Antrag zur Aufnahme bei Humax.at';
  var traderRegistrationBody = 'Ich moechte als HUMAX HAENDLER OESTERREICH gelistet werden.\n';
  var traderRegistrationBody = traderRegistrationBody + "Dazu sende ich Ihnen folgende Daten zur Registrierung:\n";
  var traderRegistrationBody = traderRegistrationBody + '(falls Daten noch nicht vorhanden sind, bitte einfach auslassen)\n';
  var traderRegistrationBody = traderRegistrationBody + 'Humax.at Kundennummer (6-stellig):\n';
  var traderRegistrationBody = traderRegistrationBody + 'Firmenname (lt. HR-Eintragung):\n';
  var traderRegistrationBody = traderRegistrationBody + 'Strasse und Nr.:\n';
  var traderRegistrationBody = traderRegistrationBody + 'PLZ und Ort:\n';
  var traderRegistrationBody = traderRegistrationBody + 'Ansprechperson:\n';
  var traderRegistrationBody = traderRegistrationBody + 'Kunden Firmen Tel-Nr.:\n';
  var traderRegistrationBody = traderRegistrationBody + 'Kunden Firmen Fax-Nr.:\n';
  var traderRegistrationBody = traderRegistrationBody + 'Kunden Firmen Mobil-Nr.:\n';
  var traderRegistrationBody = traderRegistrationBody + 'Kunden Email-Adresse:\n';
  var traderRegistrationBody = traderRegistrationBody + 'Website: http://www.\n';
  var traderRegistrationBody = traderRegistrationBody + 'Internet-Handel: Ja / Nein\n';
  var traderRegistrationBody = traderRegistrationBody + 'Webshop: http://www.\n';

  var setQuestionInfo = function() {
    if ( formQ.value.trim() == '' ) {
      formQ.value = keyExample;
      formQ.addClass('example');
    } else if ( decodeURI(formQ.value).contains(keyExample) ) {
      formQ.addClass('example');
    }
  }
  
  var removeQuestionInfo = function() {
    if ( decodeURI(formQ.value).contains(keyExample) ) {
      formQ.value = '';
      formQ.removeClass('example');
    }
  }
  
  setQuestionInfo();
  
  formQ.addEvent('focus', removeQuestionInfo);
  
  formQ.addEvent('blur', setQuestionInfo);
  
  if (GBrowserIsCompatible()) {
    map = new GMap2(mapViewer);
    map.setCenter(new GLatLng(47.861, 13.0649016), 6);
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    //map.addControl(new GOverviewMapControl());
    
    map.openInfoWindowHtml(map.getCenter(),'<h2>Humax Händlersuche in Österreich</h2><p>Alle Humax Händler auf einen Klick.</p>')
    
    // Create a base icon for all of our markers that specifies the
    // shadow, icon dimensions, etc.
    baseIcon = new GIcon(G_DEFAULT_ICON);
    baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    baseIcon.iconSize = new GSize(20, 34);
    baseIcon.shadowSize = new GSize(37, 34);
    baseIcon.iconAnchor = new GPoint(9, 34);
    baseIcon.infoWindowAnchor = new GPoint(9, 2);
    
    // Create a base icon for all of our markers that specifies the
    // shadow, icon dimensions, etc.
    smallIcon = new GIcon(G_DEFAULT_ICON);
    smallIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    smallIcon.iconSize = new GSize(14, 24);
    smallIcon.shadowSize = new GSize(27, 24);
    smallIcon.iconAnchor = new GPoint(9, 24);
    smallIcon.infoWindowAnchor = new GPoint(9, 2);
    
    geocoder = new GClientGeocoder();
    geocoder.setBaseCountryCode('at');
  }
  
  var letterIconImage = function(letter,status) {
    if (status==2){
      return "http://www.google.com/mapfiles/marker_yellow" + letter + ".png";
    } else if (status==1){
      return "http://www.google.com/mapfiles/marker_green" + letter + ".png";
    } else {
      //return "http://www.google.com/mapfiles/marker_mini.png";
      return "http://www.google.com/mapfiles/marker" + letter + ".png";
    }
  }

  // Creates a marker whose info window displays the letter corresponding
  // to the given index.
  var createMarker = function(point, index, html, letter, status) {
    // Create a lettered icon for this point using our icon class
    var icon;
    if (status>0) { 
      icon = baseIcon;
    } else { 
      icon = smallIcon;
    };
    
    var letteredIcon = new GIcon(icon);
    letteredIcon.image = letterIconImage(letter,status);

    // Set up our GMarkerOptions object
    markerOptions = { icon:letteredIcon };
    var marker = new GMarker(point, markerOptions);

    GEvent.addListener(marker, "click", function() {
      marker.openInfoWindowHtml(html);
    });
    return marker;
  }
  
  var markerClicked = function(index) {
    mapMarkers[index].openInfoWindowHtml(mapHTMLS[index]);
  }
  
  var addAddressToMapInfo = function(response) {
    if (!response || response.Status.code != 200) {
      //alert("Sorry, we were unable to geocode that address");
    } else {
      var place = response.Placemark[0];
      
      if (place.AddressDetails.Country.CountryNameCode != 'AT') return;
        
			var el = new Element('div', {'class': 'preview'});
			var name = new Element('h2', {'html': 'Erweiterte Suche'}).inject(el);
			//var link = new Element('a', {'href':'#', 'html': place.address}).inject(name, 'after');
			var link = new Element('a', {'href':'#', 'html': 'Händler in der Umgebung finden ...'}).inject(name, 'after');
			key = place.address;
			
			link.addEvent('click', function(e) {
        e.stop();
        sendJsonLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
      });
			
			//var desc = new Element('p', {'html': place.Point.coordinates[1]+', '+place.Point.coordinates[0]}).inject(name, 'after');
			el.inject($('umgebung-wrap'));
    }
  }

  
  var addInfo = function() {
    if (!dataTrader) {
      mapInfo.set('html','keine Daten zum verarbeiten!');
      return;
    }
    
    $('no-result').set('html','');
    
    if (dataTrader.count > 0) {
      var dStart = dataTrader.start + 1;
      var dEnd = dataTrader.totalCount < dataTrader.start + dataTrader.count ? dataTrader.totalCount : dataTrader.start + dataTrader.count;
      var dKeys = dataTrader.keys ? dataTrader.keys.join(', ') : key;
      
      $('search-info').set('html', 'Ergebnisse <strong>'+ dStart +' - '+ dEnd +'</strong> von <strong>'+ dataTrader.totalCount+'</strong> für <strong>'+dKeys+'</strong>');
      
      addInfoTrader(dataTrader.data);
      if (dataTrader.totalCount > 10) addPagination(dataTrader.site, dataTrader.totalSite, dataTrader.limit);
      mapMarkers[0].openInfoWindowHtml(mapHTMLS[0]);
      
      new Element('div', {'id': 'umgebung-wrap'}).inject(mapInfo);

    } else {
      var preview = new Element('div', {'class':'preview'}).inject(mapInfo);
      new Element('p', {'html': 'Es wurde kein Händler gefunden!'}).inject(preview);

      new Element('div', {'id': 'umgebung-wrap'}).inject(preview);

      //new Element('p', {'html': '<br />Sie sind <strong>Humax Händler</strong> und werden nicht gefunden?<br />Dann klicken Sie auf <a href="mailto:haendler@humax.at?subject='+encodeURI(traderRegistrationSubject)+'&amp;body='+encodeURI(traderRegistrationBody)+'" onclick="pageTracker._trackPageview(\'/haendler/registrieren.html\');">Registrieren</a> und teilen uns Ihre Firmendaten mit.'}).inject(preview);
      new Element('p', {'html': '<br />Sie sind <strong>Humax Händler</strong> und werden nicht gefunden?<br />Dann klicken Sie auf <a href="/haendler_registrieren.html">Registrieren</a> und teilen uns Ihre Firmendaten mit.'}).inject(preview);
    }
      
    if (dataTrader.totalCount < 5) {
      var address = dataTrader.keys.join(", ");
      geocoder.getLocations(address, addAddressToMapInfo);
    }
    
  }

  var addPagination = function(site, totalSite, limit) {
    var div = new Element('div', {'class': 'pagination'}).inject(mapInfo);
    var inf = new Element('h4', {'html':'Seite '+(site + 1)+' von '+(totalSite + 1)}).inject(div);
    
    if ( site > 0 ) {
      new Element('a', {
        'class':'prev',
        'html':'&laquo; zurück',
        'href':'#',
        'events': {
          'click': function(e) {
            e.stop();
            sendJsonLimit(limit*(site-1));
          }
        }
      }).inject(div);
    } else {
      new Element('span', {'class':'prev', 'html':'&laquo; zurück'}).inject(div);
    }
    
    if ( site < totalSite ) {
      new Element('a', {
        'class':'next',
        'html':'weiter &raquo;',
        'href':'#',
        'events': {
          'click': function(e) {
            e.stop();
            sendJsonLimit(limit*(site+1));
          }
        }
      }).inject(div);
    } else {
      new Element('span', {'class':'next', 'html':'weiter &raquo;'}).inject(div);
    }
  }
  
	var addInfoTrader = function(traders) {
    var bounds = new GLatLngBounds();
    
    traders.each(function(trader,index) {
      var letter = String.fromCharCode("A".charCodeAt(0) + index);
      var status = trader.status.toInt();
      
			var elInfo = new Element('div', {'class': 'trader', 'style': 'background-image:url('+letterIconImage(letter,status)+')'}).inject(mapInfo);
			new Element('h4', {'html': trader.shortname + ' <u>mehr Infos...</u>'}).inject(elInfo);
			if (status>0) new Element('p', {'html': trader.address+', '+trader.zipcode+' '+trader.town}).inject(elInfo);
			
      var html = '<h2>'+trader.shortname+'</h2><p>';
      
			if (statusTrader[status]) {
        var stat = new Element('p').inject(elInfo);
        new Element('strong',{'class':'trader-status'+status,'html':statusTrader[status][0]}).inject(stat);
        var html = html + stat.get('html') + statusTrader[status][1];
        if (trader.geo) new Element('span',{'class':'trader-geo', 'html':'ca. ' + (trader.geo * 111.2).round(1) + ' km'}).inject(stat);
      }
      
			//var geo = new Element('p', {'html': trader.lat+', '+trader.long}).inject(desc, 'after');
			
      if (status>0) {
        var html = html + '<p>';
        if (trader.picture) html = html + ' <img src="http://www.humax.at/joomla/images/google/'+trader.picture+'" align="right" />';
  			html = html + '<strong>' + trader.name + '</strong><br />';
  			html = html + trader.address + '<br />';
  			html = html + trader.zipcode+' '+trader.town + '</p>';
  			if (trader.description!='') html = html + '<p>' + trader.description + '</p>';
  			
  			html = html + '<ul>';
  			if (trader.tel!='') html = html + '<li><strong>Tel.:</strong> ' + trader.tel + '</li>';
  			if (trader.fax!='') html = html + '<li><strong>Fax:</strong> ' + trader.fax + '</li>';
  			if (trader.mobil!='') html = html + '<li><strong>Mobil:</strong> ' + trader.mobil + '</li>';
  			if (trader.email!='') html = html + '<li><strong>E-Mail:</strong> <a href="mailto:'+ trader.email +'">' + trader.email + '</a></li>';
  			if (trader.web_site!='') {
          var web = webRegExp.exec(trader.web_site);
          html = html + '<li><strong>Website:</strong> <a href="'+ trader.web_site +'" target="_blank">' + web[2] + '</a></li>';
        }
  			if (trader.web_shop!='') {
          var web = webRegExp.exec(trader.web_shop);
          html = html + '<li><strong>Webshop:</strong> <a href="'+ trader.web_shop +'" target="_blank">' + web[2] + '</a></li>';
        }
  			html = html + '</ul>';
			}
			
			if (map) {
        var point = new GLatLng(trader.lat,trader.long);
        var marker = createMarker(point, index, html, letter, trader.status);
        map.addOverlay(marker);
        mapMarkers.push(marker);
        mapHTMLS.push(html);
        
        bounds.extend(point)
        
        elInfo.addEvent('click', function() {
          mapMarkers[index].openInfoWindowHtml(mapHTMLS[index]);
        });
      }
			
		});
		
		if (map) {
      map.setZoom(map.getBoundsZoomLevel(bounds));
      map.setCenter(bounds.getCenter());
    }
	};
	
	
  var sendForm = function(e) {
      if (formQ.value.length < 2 || decodeURI(formQ.value).contains(keyExample) ) {
        return;
      }
    
      mapInfo.empty().addClass('ajax-loading');
      if (map) {
        map.clearOverlays();
        mapMarkers=[];
        mapHTMLS=[];
      }
      
      $('q').value = $('q').value.toLowerCase();
      
      url = '/cgi-bin/trader.pl?' + $('myForm').toQueryString();
      pageTracker._trackPageview(url);
      
      $('myForm').set('send', {
        onFailure: function() {
          alert('error');
        },
        onComplete: function(response) {
          mapInfo.removeClass('ajax-loading');
          dataTrader = JSON.decode(response);
          addInfo();
        }
      });
      
      $('myForm').send();
  }
  
  var sendJsonLatLng = function(lat,lng) {
    mapInfo.empty().addClass('ajax-loading');
    if (map) {
      map.clearOverlays();
      mapMarkers=[];
      mapHTMLS=[];
    }
    
    url = '/cgi-bin/trader.pl?sub=giveMyTraderByLatLng&output=json&lat='+lat+'&lng='+lng;
    pageTracker._trackPageview(url);
    
    var request = new Request.JSON({
      url: url,
      onComplete: function(jsonObj) {
        mapInfo.removeClass('ajax-loading');
        dataTrader = jsonObj;
        addInfo();
      }
    }).send();
  }

  var sendJsonLimit = function(start) {
    mapInfo.empty().addClass('ajax-loading');
    if (map) {
      map.clearOverlays();
      mapMarkers=[];
      mapHTMLS=[];
    }
    var u = url + '&start='+start;
    pageTracker._trackPageview(u);
    
    var request = new Request.JSON({
      url: u,
      onComplete: function(jsonObj) {
        mapInfo.removeClass('ajax-loading');
        dataTrader = jsonObj;
        addInfo();
      }
    }).send();
  }

	$('myForm').addEvent( 'submit', function(e) {
    e.stop();
    showMap = true;
    sendForm();
  });
}