//<![CDATA[
$(document).ready(function() {

    /* Popups */
    //create a bubble popup for each <DIV> element with class attribute as ".pin"
    $('div.pin').CreateBubblePopup();

    //set different position and align options for each <DIV>
    var positions = {
        'webshop': { position: 'top', align: 'center', text: '<h3>Webshop</h3> <br /><p class="popup">Webshops van WebTrain zijn gewoon beter. <br/>Onze webshops zijn onderscheidend en geoptimaliseerd <br/>om het hoogste rendement te halen.</p>' },
        'maatwerk': { position: 'top', align: 'center', text: '<h3>Maatwerk</h3>  <br /><p class="popup">Alle websites lijken tegenwoordig op elkaar. <br/>Wilt u een onderscheidende website? <br/>Dan moet u bij WebTrain zijn.</p>' },
        'veiligheid': { position: 'top', align: 'center', text: '<h3>Veiligheid</h3>  <br /><p class="popup">Voor u en uw klanten is het erg <br/>belangrijk dat uw gegevens veilig zijn. <br/>Daarom zorgt WebTrain er voor dat uw <br/>website of webshop niet gehackt wordt.</p>' },
        'advies': { position: 'top', align: 'center', text: '<h3>Advies</h3>  <br /><p class="popup">Door jarenlange ervaring weten wij <br/>wat wel en wat niet werkt bij online communicatie. <br/>Wij adviseren u graag bij het zoekmachine marketing, <br/>online adverteren en optimalisatie <br/>van uw website of webshop.</p>' }
    };
    for (var id in positions) {

        //set customized options for each bubble popup
        $('#' + id).SetBubblePopupOptions({

            position: positions[id].position,
            align: positions[id].align,
            tail: { align: positions[id].align },

            innerHtml: positions[id].text,

            innerHtmlStyle: {
                color: '#FFFFFF',
                'text-align': 'center'
            },

            themeName: 'all-black',
            themePath: 'images/jquerybubblepopup-theme',

            alwaysVisible: false,

            closingDelay: 200

        });
    }; //end loop

    /* Easyslider */
    $("#slider").easySlider({
        auto: true,
        continuous: true,
        controlsShow: false,
        speed: 2000,
        pause: 2000
    });

    /* Shud de helden achter Webtrain */
    $("#but-shake").click(function() {
        document.getElementById("static").style.display = 'none';
        $("#shake").effect("shake", { times: 4 }, 100);
        window.setTimeout("document.getElementById('shake').style.display = 'none'", 1000, "JavaScript");
        window.setTimeout("document.getElementById('static').style.display = 'block'", 1000, "JavaScript");
    });

    /* Mouseover effect productafbeeldingen */
    $('#websites').mouseover(function() {
        $("#websites").effect("pulsate", { times: 1 }, 4000);
    });

    $('#webshops').mouseover(function() {
        $("#webshops").effect("pulsate", { times: 1 }, 4000);
    });

    $('#video').mouseover(function() {
        $("#video").effect("pulsate", { times: 1 }, 4000);
    });

    $('#Advies').mouseover(function() {
        $("#Advies").effect("pulsate", { times: 1 }, 4000);
    });
});

function load() {

    var point = new google.maps.LatLng(51.923922, 4.491572);

    var myMapOptions = {
        zoom: 5,
        center: point,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById("map"), myMapOptions);

    var image = new google.maps.MarkerImage(
    'marker-images/image.png',
    new google.maps.Size(38, 52),
    new google.maps.Point(0, 0),
    new google.maps.Point(19, 52)
  );

    var shadow = new google.maps.MarkerImage(
    'marker-images/shadow.png',
    new google.maps.Size(68, 52),
    new google.maps.Point(0, 0),
    new google.maps.Point(19, 52)
  );

    var shape = {
        coord: [25, 0, 28, 1, 30, 2, 31, 3, 33, 4, 33, 5, 34, 6, 35, 7, 36, 8, 36, 9, 36, 10, 37, 11, 37, 12, 37, 13, 37, 14, 37, 15, 37, 16, 37, 17, 37, 18, 37, 19, 37, 20, 37, 21, 37, 22, 37, 23, 36, 24, 36, 25, 36, 26, 35, 27, 35, 28, 34, 29, 34, 30, 33, 31, 33, 32, 32, 33, 32, 34, 31, 35, 31, 36, 30, 37, 30, 38, 29, 39, 29, 40, 28, 41, 27, 42, 27, 43, 26, 44, 26, 45, 25, 46, 24, 47, 24, 48, 23, 49, 23, 50, 22, 51, 15, 51, 14, 50, 14, 49, 13, 48, 13, 47, 12, 46, 11, 45, 11, 44, 10, 43, 10, 42, 9, 41, 8, 40, 8, 39, 7, 38, 7, 37, 6, 36, 6, 35, 5, 34, 5, 33, 4, 32, 4, 31, 3, 30, 3, 29, 2, 28, 2, 27, 1, 26, 1, 25, 1, 24, 0, 23, 0, 22, 0, 21, 0, 20, 0, 19, 0, 18, 0, 17, 0, 16, 0, 15, 0, 14, 0, 13, 0, 12, 0, 11, 1, 10, 1, 9, 1, 8, 2, 7, 3, 6, 4, 5, 4, 4, 6, 3, 7, 2, 9, 1, 12, 0, 25, 0],
        type: 'poly'
    };

    var marker = new google.maps.Marker({
        draggable: false,
        raiseOnDrag: false,
        icon: image,
        shadow: shadow,
        shape: shape,
        map: map,
        position: point
    });

    myInfoWindowOptions = {
        content: '<div class="info-window-content"><p>Webtrain<br/>Kipstraat 1A<br/>3011 RR Rotterdam</p></div>',
        maxWidth: 275
    };

    infoWindow = new google.maps.InfoWindow(myInfoWindowOptions);

    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.open(map, marker);
    });

    infoWindow.open(map, marker);

}

//]]>