$().ready(function() {

    // add .map-points to div#points
    $('div#points').addClass('map-points');

    // hide all links in div#points
    $('div#points a').css("display", "none");

    // hide all links in div#points
    $('div#information div').css("display", "none");

    // store the type from each point of interest
    var poiType = null;

    // store the coordinates from each point of interest
    var coords = null;

    // store the coordinates from each point of interest
    var content = null;

    // store the href from the point of interest's link
    var linkLocation = null;

    // get the positioning info from each point of interest
    $('div#points li').each(function() {
        poiType = $(this).attr('class');
        coords = $(this).attr('id').split("-");
        content = $(this).html();

        $('div#points').append('<span class="' + poiType + '" style="position: absolute; left:' + coords[2] + 'px; top:' + coords[1] + 'px">' + content + '</span>');
    });

    // span hover function
    $('div#points span').hover(function() {
        $(this).find('a').show();
    }, function() {
        $(this).find('a').hide();
    });

    // span click function
    $('div#points span a').click(function() {
        linkLocation = "#" + $(this).attr('href').split("#")[1];
        $('div#information div').css("display", "none");
        $('div' + linkLocation).show();
    });

});