// global: height of #main.
var gMainHeight;
var map;
var info;
var markers = new Object();
markers.city = [];    
markers.area = [];
var circles = [];

var icoHM = new google.maps.MarkerImage(
    '/images/ko2/mapicons/handyman.png',
    new google.maps.Size(45, 50),
    new google.maps.Point(0, 0),
    new google.maps.Point(32, 50)
);
var icoHMshadow = new google.maps.MarkerImage(
    '/images/ko2/mapicons/handyman_shadow.png',
    new google.maps.Size(48, 34),
    new google.maps.Point(0, 0),
    new google.maps.Point(4, 33)
);

var icoOR = new google.maps.MarkerImage(
    '/images/ko2/mapicons/order.png',
    new google.maps.Size(49, 47),
    new google.maps.Point(0, 0),
    new google.maps.Point(12, 46)
);
var icoORshadow = new google.maps.MarkerImage(
    '/images/ko2/mapicons/order_shadow.png',
    new google.maps.Size(67, 29),
    new google.maps.Point(0, 0),
    new google.maps.Point(12, 28)
);

$(document).ready(function(){

	// Get height of #main.
	gMainHeight = $("#left").height();
	
	// Adjust screen.
	//adjustView();

	// On resize adjust again.
	$(window).wresize(function(){
		//adjustView();
		//alert('Resized.');
	});
	
	
	//Add button behaviour (mouseover/mouseout) when not supporting button:hover
	$("button:not(.disabled)").live("mouseover", function(){
	    $(this).addClass('hover');    
	});
	$("button:not(.disabled)").live("mouseout", function(){
	    $(this).removeClass('hover');    
	});

	// Biginfo box.
	if ($("div#biginfo").is(":not(:empty)")) {
	    $("div#biginfo").show();
	    bigInfoTimer = setTimeout(function(){ $("div#biginfo").trigger('click'); }, 30000);
	} else {
	    $("div#biginfo").trigger('click');
	}

	$("div#biginfo").click(function(){
	    clearTimeout(bigInfoTimer);
	    $(this).slideUp(500);
	})

	// Stickyinfo box.
	if ($("div#stickyinfo").is(":not(:empty)")) {
		$("div#stickyinfo").show();
	}

	$("div.list").zebra();
	$("table.zebra").zebra({
	    element: 'tr',
	    skipFirst: true  
	})

	$("button.cancel").click(function(){
	    document.location = '/backend/dashboard';
	});
	
	
	/* map */
	$("a.showmap").live('click', function(){
		var url = $(this).attr('href');
		//alert(url);
		//console.debug($(this).attr('href'));
		showmap(url);
		return false;
	});
	
	$("div.markerinfo a.showarea").live('click', function(){
	    map.setZoom(12);
	    if (info) {
	        info.close();
	    }
	    return false;
	});
	
	
});

// MAP
function showmap(dataurl) {

	var popup = 'div.popup';

	if ($(popup).length == 0) {
	    $('body').append('<div class="popup" />');
	    $(popup).html('').hide();
	    $(popup).dialog({
	        title: 'Opdrachten en klussers',
	        modal: true,
	        autoOpen: false,
	        resizable: false,
	        draggable: true,
	        minWidth: 850,
	        maxWidth: 850,
	        width: 850,
	        buttons: { }
	    });
	    $(popup).html('<div id="gmap" style="width:828px;height:450px;margin-top: 3px;" />');
	}

	$(popup).dialog('open');

	if(!map || map === null) { 
	    var myOptions = { 
	        mapTypeId: google.maps.MapTypeId.ROADMAP 
	    }; 
	    map = new google.maps.Map($("#gmap")[0], myOptions); 

	    google.maps.event.addListener(map, 'zoom_changed', function() { 
	        showMarkers(map);
	    }); 

//	    var info;
//	    var markers = new Object();
//	    markers.city = [];    
//	    markers.area = [];

	}

	$.ajax({
	    url: dataurl,
	    type: 'get',
	    data: 'format=json',
	    dataType: 'json',
	    success: function(data) {
	        // Remove markers.
			for(type in markers) {
	            for(i in markers[type]) {
	                marker = markers[type][i];
	                marker.setMap(null);
	            }
	            markers[type].length = 0;
	            markers[type] = [];
	        }
	        var html;

	        // Center map.
	        var bounds = new google.maps.LatLngBounds(
	            new google.maps.LatLng(data.center.bounds.southwest.lat, data.center.bounds.southwest.lng),
	            new google.maps.LatLng(data.center.bounds.northeast.lat, data.center.bounds.northeast.lng)
	        );
	        map.setCenter(bounds.getCenter());
	        //map.fitBounds(bounds);
	        map.setZoom(data.center.zoomlevel);

	        var cities = data['data']['cities']
	        for (city in cities) {

	            var areas = data['data']['cities'][city]['areas'];

	            var cityOrders = 0;
	            var cityHandymen = 0;

	            for (area in areas) {

	                var orders = data['data']['cities'][city]['areas'][area]['orders'] || [];
	                var handymen = data['data']['cities'][city]['areas'][area]['handymen'] || [];
	                
	                if (orders.length > 0) {
	                    
	                    var point = new google.maps.LatLng(data['data']['cities'][city]['areas'][area].lat, data['data']['cities'][city]['areas'][area].lng);
	                    var marker = new google.maps.Marker({
	                        position: point,
	                        map: null,
	                        title: 'Postcodegebied ' + area + ', ' + city,
	                        icon: icoOR,
	                        shadow: icoORshadow
	                    });                    

	                     html = '<div class="markerinfo">'
	                          + '<h1>Postcodegebied ' + area + ', ' + city + '</h1>'
	                          + '<p>Aantal opdrachten: ' + orders.length + '</p>'
	                          + '<ul>'
	                          ;
	                    
	                    for (o in orders) {
	                        html += '<li>'
	                             +      '<a href="' + orders[o].itemlink + '" title="Bekijk deze opdracht">' + orders[o].title + '</a>'
	                             +  '</li>'
	                             ;
	                    }
	                
	                    html += '</ul></div>';    
	   
	                    addMarkerInfo(map, marker, html);
	    
	                    markers.area.push(marker);
	         
	                 }
	                 for (h in handymen) {

	                    var point = new google.maps.LatLng(handymen[h].lat, handymen[h].lng);
	                    var marker = new google.maps.Marker({
	                        position: point,
	                        map: null,
	                        title: handymen[h].companyname,
	                        icon: icoHM,
	                        shadow: icoHMshadow
	                    });

	                    html = '<div class="markerinfo">'
	                         + '<h1>' + handymen[h].companyname + '</h1>'
	                         + 	   '<p>' + handymen[h].maincategoryname + '</p>'
	                         +     '<p><a href="' + handymen[h].profilelink + '" title="Meer informatie">Meer informatie</a></p>'
	                         + '</div>'
	                         ;

	                    addMarkerInfo(map, marker, html);

	                    markers.area.push(marker);
	                    
	                    //if (handymen[h].radius > 0) {
		                //    // add circles
		                //    var circle = new google.maps.Circle({
		                //        center: point,
		                //        fillColor: '#aaaaaa',
		                //        fillOpacity: 0.5,
		                //        //map: map,
		                //        radius: handymen[h].radius,
		                //        strokeColor: '#aaaaaa',
		                //        strokeOpacity: 1,
		                //        strokeWeight: 2,
		                //        zIndex: 1
		                //    });
		                //    
		                //    circles.push(circle);
	                    //}
	                    
	                }

	                cityOrders += orders.length;
	                cityHandymen += handymen.length;
	            }

	            var point = new google.maps.LatLng(data['data']['cities'][city].lat, data['data']['cities'][city].lng);
	            var marker = new google.maps.Marker({
	                position: point,
	                map: null,
	                title: city // + ': Opdrachten: ' + cityOrders + ', Klussers: ' + cityHandymen
	            });
	            
	            //attachCityMarkerClick(marker);
	            html = '<div class="markerinfo">'
	                 +     '<h1>'+ city + '</h1>'
	                 +     '<div class="row">'
	                 +         '<div class="label">Aantal opdrachten</div>'
	                 +         '<div class="value">' + cityOrders + '</div>' 
	                 +     '</div>'
	                 +     '<div class="row">'
	                 +         '<div class="label">Aantal klussers</div>'
	                 +         '<div class="value">' + cityHandymen + '</div>' 
	                 +     '</div>'
	                 +     '<div class="clear"></div>'
	                 +     '<p><a href="#" title="Zoom in" class="showarea">Zoom in</a></p>'
	                 + '</div>'
	                 ;

	            addMarkerInfo(map, marker, html);
	            markers.city.push(marker);
	        }
	        showMarkers(map);
	    }
	});	
}

function addMarkerInfo(map, marker, html) {
    var infoWindow = new google.maps.InfoWindow({});
    infoWindow.setContent(html);
    google.maps.event.addListener(marker, 'click', function(){
        if (info) {
            info.close();
        }
        info = infoWindow;
        map.panTo(marker.position);
        infoWindow.open(map, marker);
    });    
}

function showMarkersByType(map, type) {
    for(x in markers) {
        for(i in markers[x]) {
            marker = markers[x][i];
            marker.setMap((x == type) ? map : null);
        }
    }
    
    //for(c in circles) {
    //	circles[c].setMap(('area' == type) ? map : null);
    //}
}
function showMarkers(map) {
    var zoom = map.getZoom();
    showMarkersByType(map, (zoom > 11) ? 'area' : 'city')
}

function showCircles(map) {
	
}



function __showMap(city) {
    var popup = 'div.popup';
    //$(popup).remove();
    if ($(popup).length == 0) {
        $('body').append('<div class="popup" />');
        $(popup).html('').hide();
        $(popup).dialog({
            title: 'Klussers en klusopdrachten in de omgeving van ' + city,
            modal: true,
            autoOpen: false,
            resizable: false,
            draggable: true,
            minWidth: 850,
            maxWidth: 850,
            width: 850,
            buttons: { }
        });
        $(popup).html('<div id="gmap" style="width:828px;height:450px;margin-top: 3px;" />');

    } else {
        //$(popup).html('');
    }
    
    
    $(popup).dialog('open');
    console.debug(google);
    if (google == null) {
    	console.debug('js not loaded.');
    }
    
    var latlng = new google.maps.LatLng(53.077056, 4.7777726); 
    if(map) { 
        map.panTo(latlng); 
    } else {
        var myOptions = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; 
        var map = new google.maps.Map($("#gmap")[0], myOptions); 
        var markers = [];
        var icoHM = new google.maps.MarkerImage(
            '/images/ko2/mapicons/handyman.png',
            new google.maps.Size(45, 50),
            new google.maps.Point(0, 0),
            new google.maps.Point(32, 50)
        );
        var icoHMshadow = new google.maps.MarkerImage(
            '/images/ko2/mapicons/handyman_shadow.png',
            new google.maps.Size(48, 34),
            new google.maps.Point(0, 0),
            new google.maps.Point(4, 33)
        );
        
        var icoOR = new google.maps.MarkerImage(
            '/images/ko2/mapicons/order.png',
            new google.maps.Size(49, 47),
            new google.maps.Point(0, 0),
            new google.maps.Point(12, 46)
        );
        var icoORshadow = new google.maps.MarkerImage(
            '/images/ko2/mapicons/order_shadow.png',
            new google.maps.Size(67, 29),
            new google.maps.Point(0, 0),
            new google.maps.Point(12, 28)
        );
        
    } 
    
    var address = city + ', Nederland';
    var geocoder = new google.maps.Geocoder();

    geocoder.geocode( 
        { 'address': address }, 
        function(results, status) { 
            if (status == google.maps.GeocoderStatus.OK) {
                
                var point = results[0].geometry.location;
    
                map.setCenter(results[0].geometry.bounds.getCenter());
                map.fitBounds(results[0].geometry.bounds);

            } else {
                //console.debug('Could not resolve address');
            }
        }
    )

    
    $.ajax({
        url: '/map/city',
        type: 'get',
        data: 'format=json',
        dataType: 'json',
        success: function(data){
            for(i in markers) {
                marker = markers[i];
                marker.setMap(null);
            }
            markers.length = 0;

            for(i in data['orders']) {
                var point = new google.maps.LatLng(data['orders'][i].Lat, data['orders'][i].Lng);
                var marker = new google.maps.Marker({
                    position: point,
                    map: map,
                    title: 'Opdrachten in postcodegebied ' + data['orders'][i].AreaCode + ' : ' + data['orders'][i].Orders.length,
                    icon: icoOR,
                    shadow: icoORshadow
                });
                
                /*

                google.maps.event.addListener(marker, 'click', function(){
                    var infoWindow = new google.maps.InfoWindow({
                        content: marker.infoHtml  
                    });
                    infoWindow.open(map, marker);
                });
                */
                
                var content = 
                    '<h1>Postcodegebied ' + data['orders'][i].AreaCode + '</h1>'
                +   '<p>Aantal opdrachten: ' + data['orders'][i].Orders.length + '</p>'
                +   '<ul>' 
                ;
                
                for(o in data['orders'][i].Orders) {
                    content += '<li><a href="' + data['orders'][i].Orders[o].ItemLink + '">' + data['orders'][i].Orders[o].Title + '</a></li>';
                }
                
                content += '</ul>';
                addInfoHtml(map, marker, content);

                markers.push(marker);
            }
            
            for(k in data['handymen']) {
                var point = new google.maps.LatLng(data['handymen'][k].Lat, data['handymen'][k].Lng);
                var marker = new google.maps.Marker({
                    position: point,
                    map: map,
                    title: data['handymen'][k].CompanyName,
                    icon: icoHM,
                    shadow: icoHMshadow
                });
                
                var content = 
                    '<h1>' + data['handymen'][k].CompanyName + '</h1>'
                +   '<p><a href="' + data['handymen'][k].ProfileLink + '">Meer informatie in de bedrijvengids.</a></p>'
                    ;
                addInfoHtml(map, marker, content);
                markers.push(marker);
            }
        }
    });
}

function __addInfoHtml(map, marker, html) {
    
    var infoWindow = new google.maps.InfoWindow({});
    infoWindow.setContent(html);
    
    google.maps.event.addListener(marker, 'click', function(){
        infoWindow.open(map, marker);
    });
}

// Adjust screen
function adjustView() {
    var hMain = $("#left").height();
    
    var hFooter = $("#footer").outerHeight();
    var tFooter = $("#footer").position().top;

    var hWindow = $(window).height();
    var diff = hWindow - (tFooter + hFooter);

    if (diff > 0) {
        $("#left").height(hMain + diff);
    } else if (diff < 0 && (hMain + diff) >= gMainHeight) {
        $("#left").height(hMain + diff);
    } else if (diff < 0) {
		$("#left").height(gMainHeight);
    }
}

function _adjustView() {
	var h1 = $("#main").position().top;
	var h2 = $("#main").outerHeight({margin: true});
	var tm = h1 + h2;
	var h3 = $("#footer").outerHeight({margin: true});
	var h4 = $(window).height();

	if ((tm + h3) >= h4) {
	    $("#main").css("height", "auto");
	} else {
	    $("#main").css("height", (h4 - 1 - (tm + h3) + $("#main").height()) + "px");
	}	
}