window.addEvent('domready', function(){
	if (GBrowserIsCompatible()) {
		var startInitGmap = new Date().valueOf();
		
		/*start config googlemaps implementation*/
		
		var pathLocationInfo = karw.context+'/store/map_popup';
			
		
		//every shop will have a status porperty.. now 0 means normal and so on
		var adapterStatus = {
				normal:"REGULAR",
				newstore:"RECENTLY_OPENED",
				shortly:"OPENS_SHORTLY",
				renewed:"RENOVATED",
				reopened:"REOPENED",
				tempclosed:"CLOSED_TEMPORARILY",
				outlet:"OUTLET"
			}

		var offsetXinfoWindow = 16; //the offset of the infowindow next to the marker horizontally
		var offsetYinfoWindow = 120;//87;//the offset of the infowindow next to the marker vertically
		
		var defaultZoomLevelOneLocation = 13;
		var defaultZoomLevelAllLocations = 7;
		var centerAllLocations = new GLatLng(52.309822,5.421753);//center of the netherlands
		
		var bolZoomOnClick = true;//zoom in on region when clicking a marker
		var minZoomLevelOnClick = 9;//minimum zoomlevel to zoom into when a marker is clicked
		
		
		/*end config googlemaps implementation*/
		
		//some 'global' variables for the gmap
		var currentInfoWindow = null;
		var currRedrawTimeOut = null;
		
		//baseIcon to clone for every marker
		var baseIcon = new GIcon({
			iconSize : new GSize(20, 20),
			iconAnchor : new GPoint(6, 16),
			infoWindowAnchor : new GPoint(5, 1)
		});
		
		var zoomedBaseIcon = new GIcon({
			iconSize : new GSize(48, 48),
			iconAnchor : new GPoint(22, 44),
			infoWindowAnchor : new GPoint(5, 1)
		});
		
		var locationIcon = new GIcon({
			iconSize : new GSize(57, 44),
			iconAnchor : new GPoint(28, 44),
			infoWindowAnchor : new GPoint(5, 1)
		});
		
		//custom overlay class for custom info window
		var karwInfoPopUp = function(marker) {
		  this.marker = marker;
		}
		karwInfoPopUp.prototype = new GOverlay();
		karwInfoPopUp.prototype.initialize = function(map) {
	
			var popUpWindow = new Element('div', {
			  'class': 'info-popup',
			  'id':'testid',	
			  'html': '<span class="top"> </span><div class="close">sluiten</div><div class="popup-box"><div class="cont-popup-box-loading"><img src="'+karw.pathStaticData+'images/loader.gif" class="loading" /></div></div><span class="bottom"> </span>',
			  'styles': {
			      'left':offsetXinfoWindow,
			      overflow:'hidden'
			  }
			});
	
			new Request({
				url: pathLocationInfo +'?random='+Math.random(),
				noCache: true,
				method: 'get',
				data:{storeid:this.marker.locationId},
				onSuccess:function(responseText, responseXML){
					var contentContainer = popUpWindow.getElement(".popup-box");
					
					if(Browser.Engine.trident && Browser.Engine.version<7){//ie6 so no fancy stuff
						var oldHeight = popUpWindow.offsetHeight;
						contentContainer.set('html', responseText);
						var newHeight = popUpWindow.offsetHeight;
						popUpWindow.setStyles({top:parseInt(popUpWindow.style.top,10)+(oldHeight-newHeight)})
					}
					else {//no ie6 so let's have some animation
						var oldHeight = popUpWindow.offsetHeight;
						var oldTop = parseInt(popUpWindow.style.top,10);
						var waitContentHeight = contentContainer.offsetHeight; 

						popUpWindow.setStyles({height:oldHeight})
						contentContainer.set('html', responseText);

						var infoContentHeight = contentContainer.scrollHeight;
						var newHeight = oldHeight + (infoContentHeight-waitContentHeight) 
						var newTop = oldTop - (infoContentHeight-waitContentHeight)

						var slideFX = new Fx.Morph(popUpWindow, {duration: 'short', transition: Fx.Transitions.Sine.easeOut});
						slideFX.start({
							'height': [oldHeight, newHeight],
							'top': [oldTop, newTop]
						});
					}
					  
				 },
				onFailure:function(){
					 var contentContainer = popUpWindow.getElement(".popup-box");
					 contentContainer.set('html', "<span class='error'>fout: informatie niet beschikbaar</span>");
				 }
			}).send();
	
			  
			popUpWindow.getElement(".close").addEvent("click",function(){closeOverlay(true)})
		
			this._map = map;
			this._div = popUpWindow;
		
			map.getPane(G_MAP_FLOAT_PANE).appendChild(popUpWindow);  
		}
		
		karwInfoPopUp.prototype.remove = function(){
		  this._div.parentNode.removeChild(this._div);
		}
		
		karwInfoPopUp.prototype.redraw = function() {}
		
		karwInfoPopUp.prototype.positionPopup = function() {
		  this._div.setStyles({
			  top:(this._map.fromLatLngToDivPixel(this.marker.getPoint()).y - this._div.offsetHeight+offsetYinfoWindow),
			  left:(this._map.fromLatLngToDivPixel(this.marker.getPoint()).x+offsetXinfoWindow),
			  visibility: 'visible'
		  });
		}
		
		function closeOverlay(bolAnimate) {
			if (currentInfoWindow) {
				  if(!bolAnimate){
					  map.removeOverlay(currentInfoWindow);
				  }
				  else{
					  var fade = new Fx.Morph(currentInfoWindow._div, {duration: 'short', transition: Fx.Transitions.Sine.easeOut,complete :function(){alert("!")}});
					  fade.start({
					      'height': [currentInfoWindow._div.offsetHeight, 0]
					  });
				  }
			}
		}

		//initializes the map
		var map = new GMap2(document.getElementById("sfp-gmap-container"));

		//build icons to clone
		var arrIcons = []
        arrIcons[adapterStatus.normal] = new GIcon(baseIcon);
		arrIcons[adapterStatus.normal].image = karw.pathStaticData+"images/gmap/normal.png";
        arrIcons[adapterStatus.newstore] = new GIcon(baseIcon);
		arrIcons[adapterStatus.newstore].image = karw.pathStaticData+"images/gmap/new.png";
		arrIcons[adapterStatus.shortly] = new GIcon(baseIcon);
		arrIcons[adapterStatus.shortly].image = karw.pathStaticData+"images/gmap/shortly.png";
		arrIcons[adapterStatus.renewed] = new GIcon(baseIcon);
		arrIcons[adapterStatus.renewed].image = karw.pathStaticData+"images/gmap/renewed.png";
        arrIcons[adapterStatus.reopened] = new GIcon(baseIcon);
		arrIcons[adapterStatus.reopened].image = karw.pathStaticData+"images/gmap/reopened.png";
        arrIcons[adapterStatus.tempclosed] = new GIcon(baseIcon);
		arrIcons[adapterStatus.tempclosed].image = karw.pathStaticData+"images/gmap/tempclosed.png";
        arrIcons[adapterStatus.outlet] = new GIcon(baseIcon);
		arrIcons[adapterStatus.outlet].image = karw.pathStaticData+"images/gmap/outlet.png";

		var arrIcons2 = []
		arrIcons2[adapterStatus.normal] = new GIcon(zoomedBaseIcon);
		arrIcons2[adapterStatus.normal].image = karw.pathStaticData+"images/gmap/normal-big.png";
		arrIcons2[adapterStatus.newstore] = new GIcon(zoomedBaseIcon);
		arrIcons2[adapterStatus.newstore].image = karw.pathStaticData+"images/gmap/new-big.png";
		arrIcons2[adapterStatus.shortly] = new GIcon(zoomedBaseIcon);
		arrIcons2[adapterStatus.shortly].image = karw.pathStaticData+"images/gmap/shortly-big.png";
		arrIcons2[adapterStatus.renewed] = new GIcon(zoomedBaseIcon);
		arrIcons2[adapterStatus.renewed].image = karw.pathStaticData+"images/gmap/renewed-big.png";
		arrIcons2[adapterStatus.reopened] = new GIcon(zoomedBaseIcon);
		arrIcons2[adapterStatus.reopened].image = karw.pathStaticData+"images/gmap/reopened-big.png";
		arrIcons2[adapterStatus.tempclosed] = new GIcon(zoomedBaseIcon);
		arrIcons2[adapterStatus.tempclosed].image = karw.pathStaticData+"images/gmap/tempclosed-big.png";
		arrIcons2[adapterStatus.outlet] = new GIcon(zoomedBaseIcon);
		arrIcons2[adapterStatus.outlet].image = karw.pathStaticData+"images/gmap/outlet-big.png";
		
		if(karwLocations.view=="storelocation" && karwLocations.show && karwLocations.show.length==1){
			
			for (var i = karwLocations.all.length-1; i >= 0; i--) {
				if(karwLocations.all[i].id==karwLocations.show[0].id){
					arrIcons["storelocation"] = arrIcons2[(karwLocations.all[i].status?karwLocations.all[i].status:adapterStatus.normal)];
					arrIcons2["storelocation"] = arrIcons["storelocation"];
					karwLocations.all[i].status="storelocation"
					break;
				}
			}
			var detailPage = true;
			//map.setMapType(G_SATELLITE_MAP);
		}
		
        GEvent.addListener(map, "zoomend", function(){
    		if (currentInfoWindow) {
    			currentInfoWindow.positionPopup();
    		}
    	});
        map.setUIToDefault();
        map.disableScrollWheelZoom();
        var mapManager = new GMarkerManager(map,{trackMarkers:true});
        
        //add the markers to google maps
		for (var i = karwLocations.all.length-1; i >= 0; i--) {
            var point = new GLatLng(karwLocations.all[i].lat,karwLocations.all[i].lon);
            var marker = new GMarker(point,{icon:arrIcons[(karwLocations.all[i].status?karwLocations.all[i].status:adapterStatus.normal)],title:karwLocations.all[i].name});
            marker.locationId = karwLocations.all[i].id;
            value = (karwLocations.all[i].status?karwLocations.all[i].status:adapterStatus.normal);
            var markerZoomed = new GMarker(point,{icon:arrIcons2[(karwLocations.all[i].status?karwLocations.all[i].status:adapterStatus.normal)],title:karwLocations.all[i].name});
            markerZoomed.locationId = karwLocations.all[i].id;
            
            GEvent.addListener(marker, "click", function() {
            	if (currentInfoWindow!=null) {
                  closeOverlay(false);
                }
            	var currZoom = bolZoomOnClick?Math.max(map.getZoom(),minZoomLevelOnClick):map.getZoom(); 
            	map.setZoom(currZoom)
            	var mapproj = map.getCurrentMapType().getProjection();
            	var markerGpoint = mapproj.fromLatLngToPixel(new GLatLng(this.getPoint().lat(), this.getPoint().lng()),currZoom);
            	var newCenterMap = mapproj.fromPixelToLatLng(new GPoint(markerGpoint.x+100,markerGpoint.y-100),currZoom);
                map.panTo(newCenterMap);
            	//if (!this.overlay) {
                  this.overlay = new karwInfoPopUp(this);
                //}
                currentInfoWindow = this.overlay;
                map.addOverlay(this.overlay);
                this.overlay.positionPopup(true)
              });
            
            GEvent.addListener(markerZoomed, "click", function() {
            	if (currentInfoWindow!=null) {
                  closeOverlay(false);
                }
            	var currZoom = bolZoomOnClick?Math.max(map.getZoom(),minZoomLevelOnClick):map.getZoom(); 
            	map.setZoom(currZoom)
            	var mapproj = map.getCurrentMapType().getProjection();
            	var markerGpoint = mapproj.fromLatLngToPixel(new GLatLng(this.getPoint().lat(), this.getPoint().lng()),currZoom);
            	var newCenterMap = mapproj.fromPixelToLatLng(new GPoint(markerGpoint.x+100,markerGpoint.y-100),currZoom);
                map.panTo(newCenterMap);
            	//if (!this.overlay) {
                  this.overlay = new karwInfoPopUp(this);
                //}
                currentInfoWindow = this.overlay;
                map.addOverlay(this.overlay);
                this.overlay.positionPopup(true)
              });
            
            if(detailPage === true){
//            	mapManager.addMarker(marker,0,17);
            	mapManager.addMarker(marker,0,9);
            	mapManager.addMarker(markerZoomed,10,17);
            }else{
            	mapManager.addMarker(marker,0,9);
            	mapManager.addMarker(markerZoomed,10,17);
            }
            //map.addOverlay(marker);
        }
		
		if(!karwLocations.show || karwLocations.show.length<1){//no show array specified so show all locations
			map.setCenter(centerAllLocations, karwLocations.zoom?karwLocations.zoom:defaultZoomLevelAllLocations);	
		}
		else if(karwLocations.show.length==1){//show one location
			map.setCenter(new GLatLng(karwLocations.show[0].lat,karwLocations.show[0].lon), karwLocations.zoom?karwLocations.zoom:defaultZoomLevelOneLocation);
		}
		else {//show more than one location
			var latMin = karwLocations.show[0].lat;
			var latMax = karwLocations.show[0].lat;
			var lonMin = karwLocations.show[0].lon;
			var lonMax = karwLocations.show[0].lon;
			for(var i=karwLocations.show.length-1;i>0;i--){
				latMin = Math.min(latMin,karwLocations.show[i].lat);
				latMax = Math.max(latMax,karwLocations.show[i].lat);
				lonMin = Math.min(lonMin,karwLocations.show[i].lon);
				lonMax = Math.max(lonMax,karwLocations.show[i].lon);
			}
			var markersBound = new GLatLngBounds(new GLatLng(latMin,lonMin),new GLatLng(latMax,lonMax))
			map.setCenter(new GLatLng((latMin+0.5*(latMax-latMin)),(lonMin+0.5*(lonMax-lonMin))), karwLocations.zoom?karwLocations.zoom:map.getBoundsZoomLevel(markersBound));
		}
		
		if(document.getElementById("yourRouteForm")){
			var directions=null; 
			$("yourRouteForm").addEvent("submit",function(){
				if(directions!=null)directions.clear();
				document.getElementById("routeInstructionsContainer").innerHTML ="";
				directions = new GDirections(map,document.getElementById("routeInstructionsContainer"));
				GEvent.addListener(directions,"error", function() {
					var googleWin = window.open("http://maps.google.nl?&saddr="+$("postcodeStore").get("value")+" ,netherlands"+"&daddr="+$("postcodeUser").get("value")+" ,netherlands","_blank");
				})
				$("postcodeUser").set("value", $("postcodeUser").get("value").replace(/\b([0-9][0-9][0-9][0-9])\s*([A-Za-z][A-Za-z])\b/, "$1$2"));
				directions.load("from: "+$("postcodeUser").get("value")+" ,netherlands to: "+$("postcodeStore").get("value")+", netherlands",{locale:"nl"});
				//map.setMapType(G_NORMAL_MAP);
				return false;
			})
		}
		window.addEvent('onunload',GUnload);  
      }
	
	//console.log("init gmaps: "+(new Date().valueOf()-startInitGmap))
})

Tabs = {}
Tabs.ShowTabContent = function(counter){

	if(counter == 0){
		var Panel = $('tab-0');
		var PanelDis = $('tab-1');
		var li = $('li-0');
		var liDis = $('li-1');
	}
	else {
		var Panel = $('tab-1');
		var PanelDis = $('tab-0');
		var li = $('li-1');
		var liDis = $('li-0');
	}
	PanelDis.removeClass("active");
	PanelDis.removeClass("display");
    Panel.addClass("display");
    Panel.addClass("active");
    liDis.removeClass("active");
	li.addClass("active");
}