var map, bubble;

function LoadGMaps(maps_page, type) {
    if (GBrowserIsCompatible()) {
        map = new GMap2($('map'));
        bubble = new EBubble(map, "/images/maps/infowindow/custom.gif",new GSize(180,49), new GSize(190,70), new GPoint(17,0), new GPoint(-15,15));

        if(type != 'proposals') {
            map.setCenter(new GLatLng(52.3738119, 4.8909513), 15);
            map.enableScrollWheelZoom();
            map.addControl(new GSmallZoomControl());
        }

        if (type == 'choices')
            LoadChoiceMarkers(maps_page);
        else if(type == 'proposals') {
            map.setCenter(new GLatLng(52.3738119, 4.8909513), 12);
            map.disableDoubleClickZoom();
            LoadProposalMarkers(maps_page)
        } else
            LoadMarkers(maps_page);

        InitMapsLinks();
    } else {
        $('map').update('De Google Maps API is niet geschikt voor deze browser');
    }
}

function LoadMarkers(maps_page) {
    // Markers downloaden en weergeven
    var epoch = new Date().getTime(); // Prevent caching
    GDownloadUrl("/maps/markers.xml?page=" + maps_page + "&"+epoch, function(data, responseCode) {
        var xml = GXml.parse(data);
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {

            // Point
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);

            // Description
            var description = GXml.value(markers[i].getElementsByTagName("description")[0]);
            var marker_id = GXml.value(markers[i].getElementsByTagName("user_id")[0]);
            var profile_wish = GXml.value(markers[i].getElementsByTagName("wish")[0]);
            // Motivation
            var name = GXml.value(markers[i].getElementsByTagName("name")[0]);
            var motivation = GXml.value(markers[i].getElementsByTagName("motivation")[0]);
            var profile_name = GXml.value(markers[i].getElementsByTagName("profile_name")[0]);
            var profile_letter = GXml.value(markers[i].getElementsByTagName("profile_letter")[0]);

            // Icon
            var icontype = GXml.value(markers[i].getElementsByTagName("icontype")[0]);
            var icon = CreateIcon(icontype);

            // Create Marker
            var marker = CreateMarker(point, description, icon, marker_id, name, profile_letter, profile_name, motivation, profile_wish);
            map.addOverlay(marker);
        }
    });
}

function CreateMarker(point, description, icon, marker_id, name, profile_letter, profile_name, motivation, profile_wish){
    var marker = new GMarker(point, icon);
    var html = '<table border="0" style="height: 50px; width: 155px; font-family: Arial, Verdana; font-size: 10pt;"><tr><td><b>' + description + '</b></td></tr></table>';

    GEvent.addListener(marker, "click", function() {
        map.setCenter(point);
        bubble.openOnMarker(marker,html)
		
        current_marker_id = marker_id;
		
        $('current_wish_img').src= '/images/layouts/wishes/profiles_selected/profile_' + profile_letter + '.gif'
        $('current_wish_wish').update('<b>' + profile_wish + '</b>')
        $('current_wish_profile').update('<b>' + profile_name + '</b>');
        $('current_wish_name').update('<b>' + name + '</b>');
        $('current_wish_description').update(motivation);
        show_profile(profile_name);

    });
	
    if ((marker_id > 0) && $('wishmarker_' + marker_id)) {
        $('wishmarker_' + marker_id).observe("mouseover", function(){
            map.setCenter(point);
            bubble.openOnMarker(marker,html)
        });
    }

    if ((marker_id > 0) && $('linkmarker_' + marker_id)) {
        $('linkmarker_' + marker_id).observe("click", function(){
            map.setCenter(point);
            bubble.openOnMarker(marker,html)
            $('current_wish_img').src= '/images/layouts/wishes/profiles_selected/profile_' + profile_letter + '.gif'
            $('current_wish_wish').update('<b>' + profile_wish + '</b>')
            $('current_wish_profile').update('<b>' + profile_name + '</b>');
            $('current_wish_name').update('<b>' + name + '</b>');
            $('current_wish_description').update(motivation);
            show_profile(profile_name);
        });

        $('linkmarker_img_' + marker_id).observe("click", function(){
            map.setCenter(point);
            bubble.openOnMarker(marker,html)
            $('current_wish_img').src= '/images/layouts/wishes/profiles_selected/profile_' + profile_letter + '.gif'
            $('current_wish_wish').update('<b>' + profile_wish + '</b>')
            $('current_wish_profile').update('<b>' + profile_name + '</b>');
            $('current_wish_name').update('<b>' + name + '</b>');
            $('current_wish_description').update(motivation);
            show_profile(profile_name);
        });
    }

    return marker;
}

function CreateIcon(type) {
    var iconType = '';
    switch(type) {
        case 'z': iconType = {
            'img':'profile_z.gif',
            'width':24,
            'height':23
        }; break;
        case 'p': iconType = {
            'img':'profile_p.gif',
            'width':24,
            'height':23
        }; break;
        case 'k': iconType = {
            'img':'profile_k.gif',
            'width':24,
            'height':24
        }; break;
        case 'f': iconType = {
            'img':'profile_f.gif',
            'width':24,
            'height':23
        }; break;
        case 'mo': iconType = {
            'img':'profile_mo.gif',
            'width':24,
            'height':24
        }; break;
        case 'ma': iconType = {
            'img':'profile_ma.gif',
            'width':24,
            'height':23
        }; break;
        case 'r': iconType = {
            'img':'profile_r.gif',
            'width':24,
            'height':23
        }; break;
        case 'o': iconType = {
            'img':'profile_o.gif',
            'width':24,
            'height':23
        }; break;
    }

    var icon = new GIcon();
    icon.image = '/images/maps/icons/' + iconType.img;
    icon.iconSize = new GSize(iconType.width, iconType.height);
    icon.iconAnchor = new GPoint(0, iconType.width);
    icon.infoWindowAnchor = new GPoint(parseInt(iconType.width/2), 0);
    return icon;
}

function LoadChoiceMarkers(maps_page) {
    // Markers downloaden en weergeven
    var epoch = new Date().getTime(); // Prevent caching
    GDownloadUrl("/maps/quiz_choices.xml?page=" + maps_page + "&"+epoch, function(data, responseCode) {
        var xml = GXml.parse(data);
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {

            // Point
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);

            // Description
            var marker_data = new Array();

            marker_data['marker_id']	= GXml.value(markers[i].getElementsByTagName("user_id")[0]);
            marker_data['name']			= GXml.value(markers[i].getElementsByTagName("user_name")[0]);
            marker_data['location']		= GXml.value(markers[i].getElementsByTagName("location")[0]);
            marker_data['motivation']	= GXml.value(markers[i].getElementsByTagName("motivation")[0]);
            marker_data['profile_name']	= GXml.value(markers[i].getElementsByTagName("profile")[0]);
            marker_data['profile_letter'] = GXml.value(markers[i].getElementsByTagName("profile_letter")[0]);

            // Create Marker

            var marker = CreateChoiceMarker(point, marker_data);
            map.addOverlay(marker);
        }
    });
}

function CreateChoiceMarker(point, marker_data) {
    var marker = new GMarker(point);
    var html = '<table border="0" style="height: 50px; width: 155px; font-family: Arial, Verdana; font-size: 10pt;"><tr><td><b>' + marker_data['profile_name'] + ' ' + marker_data['name'] + '</b></td></tr></table>';

    var marker_id	 = marker_data['marker_id'];
    var profile_wish = marker_data['profile_wish'];
    var profile_name = marker_data['profile_name'];
    var name		 = marker_data['name'];
    var motivation	 = marker_data['motivation'];

    GEvent.addListener(marker, "click", function() {
        map.setCenter(point);
        bubble.openOnMarker(marker,html);
        current_marker_id = marker_id;
        get_user_info(marker_id);
    });

    if ((marker_id > 0) && $('wishmarker_' + marker_id)) {
        $('wishmarker_' + marker_id).observe("mouseover", function(){
            map.setCenter(point);
            bubble.openOnMarker(marker,html)
        });
    }

    if ((marker_id > 0) && $('linkmarker_' + marker_id)) {
        $('linkmarker_' + marker_id).observe("click", function(){
            map.setCenter(point);
            bubble.openOnMarker(marker,html)
            get_user_info(marker_id);
        });

        $('linkmarker_img_' + marker_id).observe("click", function(){
            map.setCenter(point);
            bubble.openOnMarker(marker,html)
            get_user_info(marker_id);
        });
    }

    return marker;
}

function get_user_info(user_id) {
    new Ajax.Request('/quiz_choices/get_user_info/' + user_id,
    {
        method: 'get',
        onSuccess: function(result) {
            var xml = GXml.parse(result.responseText);
            var user_name = GXml.value(xml.documentElement.getElementsByTagName("user_name")[0]);
            var location = GXml.value(xml.documentElement.getElementsByTagName("location")[0]);
            var motivation = GXml.value(xml.documentElement.getElementsByTagName("motivation")[0]);
            var profile = GXml.value(xml.documentElement.getElementsByTagName("profile")[0]);
            var profile_letter = GXml.value(xml.documentElement.getElementsByTagName("profile_letter")[0]);
            var results = xml.documentElement.getElementsByTagName("result");
            var wish_html = '<span style="color: #000;"><b>De plek:</b></span> ' + location + '<br /><span style="color: #000;"><b>Motivatie</b></span><br />' + motivation;
            $('current_wish_description').update(wish_html);
            $('current_wish_profile').update('<b>' + profile + '</b>');
            $('current_wish_name').update('<b>' + user_name + '</b>');
            $('current_wish_img').src = '/images/layouts/wishes/profiles_selected_choices/profile_' + (profile_letter) + '.gif';
            for(var i = 0; i < results.length; i++) {

                var val = parseFloat(GXml.value(results[i]));
                $('question_' + (i+1)).style.width = (val*10) + '%';
            //TODO: alt updaten / title
            }
        }
    })
}

function LoadProposalMarkers(maps_page) {
    // Markers downloaden en weergeven
    var epoch = new Date().getTime(); // Prevent caching
    GDownloadUrl("/maps/proposals.xml?page=" + maps_page + "&"+epoch, function(data, responseCode) {
        var xml = GXml.parse(data);
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {

            // Point
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);

            // Description
            var marker_data = new Array();
            marker_data['location'] = GXml.value(markers[i].getElementsByTagName("location")[0]);
            marker_data['marker_id'] = GXml.value(markers[i].getElementsByTagName("markerid")[0]);
            marker_data['marker_color'] = GXml.value(markers[i].getElementsByTagName("marker_color")[0]);

            // Create Marker
            var marker = CreateProposalMarker(point, marker_data);
            map.addOverlay(marker);
        }
    });
}

function CreateProposalMarker(point, marker_data) {

    var icon = new GIcon();
    icon.image = '/images/maps/icons_proposals/pijl-' + marker_data['marker_color'] + '.png';
    icon.iconSize = new GSize(15, 34);
    icon.iconAnchor = new GPoint(0, 15);
    icon.infoWindowAnchor = new GPoint(parseInt(15/2), 0);

    var marker = new GMarker(point, icon);
    var html = '<div style="width: 300px; padding-top: 0.5em;">' + marker_data['location'] + '</div>';

    GEvent.addListener(marker, "click", function() {
        map.setCenter(point);
        marker.openInfoWindowHtml(html);
    });

    var proposal_question = $('proposal_question_' + marker_data['marker_id']);
    if(proposal_question) {
        proposal_question.observe('click', function() {
            map.setCenter(point);
            marker.openInfoWindowHtml(html);
            window.scrollTo(0,0);
        }).addClassName('connected_to_map').down('span').title='Klik om naar de kaart te gaan';
    }


    return marker;
}

function InitMapsLinks() {
    $$('a.map_link').invoke('observe', 'click', function() {
        switch(this.innerHTML) {
            case 'A\'dam Noord':	ScrollToMap(52.3986625, 4.9382705); break;
            case 'A\'dam Oost':		ScrollToMap(52.3589341, 4.9209847); break;
            case 'A\'dam Centrum':	ScrollToMap(52.3723939, 4.8940873); break;
            case 'A\'dam Zuid':		ScrollToMap(52.3576678, 4.8648777); break;
            case 'A\'dam West':		ScrollToMap(52.3635523, 4.8458518); break;
        }
    });
}

function ScrollToMap(lat, lng) {
    map.panTo(new GLatLng(lat, lng));
}