ASP.Net Using Data in Array to Populate HTML Map Areas Tooltips and Data Captions

I have an HTML page which reads the data from a data array in an ASP.Net controller. The data is used to create map areas which will then show the data as a tooltip and also fill caption boxes. I have successfully created the areas using a modified version of the code on the ImageMapster Beatles Menu page:

<img id="mainmap" src="/images/1641Map1.jpg" style="width:879px;  height:1557px" usemap="#main-map">
 @foreach (var item in Model.Areas)
{
<area shape="rect" data-full="@item.Name" data-name="@item.Name,all" coords="@item.Left,@item.Top,@item.Right,@item.Bottom" href="#"  />
}
<div style="width:390px; height: 120px; font-size: 12px; ">
<div id="1641-caption" style="clear:both;border: 1px solid black; width: 400px; padding: 6px; display:none;">
    <div id="1641-caption-header" style="font-style: italic; font-weight: bold; margin-bottom: 12px;"></div>
    <div id="1641-caption-text"></div>
</div>

The following Javascript is where I am having trouble. This is fixed and does not read from the data array provided:

<script>
$(document).ready(function () {
    alert("ready")
});
var inArea,
    map = $('#mainmap'),

captions = {
        area1: ["Area 1 Caption", "Area 1 Text"],
        area2: ["Area 2 Caption", "Area 2 Text"],
        area3: ["Area 3 Caption", "Area 3 Text"],
        area4: ["Area 4 Caption", "Area 4 Text"],
    },
//When mouse moves over individual areas:
single_opts = {
    fillColor: '000000',
    fillOpacity: 0.1,
    stroke: true,
    strokeColor: 'ff0000',
    strokeWidth: 2
},
    //When mouse moves over image:
    all_opts = {
        // fillColor: 'ffffff',
        fillColor: '000000',
        fillOpacity: 0,
        stroke: true,
        strokeWidth: 1,
        strokeColor: '000000'
    },
    initial_opts = {
        mapKey: 'data-name',
        isSelectable: false,
        singleSelect: true,
        fill: true,
        mapkey: 'id',
        fillOpacity: 0.3,
        fillColor: 'ff0000',
        clickNavigate: true,
        showToolTip: true,

        onMouseover: function (data) {
            inArea = true;
            $('#1641-caption-header').text(captions[data.key][0]);
            $('#1641-caption-text').text(captions[data.key][1]);
            $('#1641-caption').show();
        },
        onMouseout: function (data) {
            inArea = false;
            $('#1641-caption').hide();
        },
        areas: [
            {
                key: "area1",
                toolTip: "Area 1 Caption"
            },
            {
                key: "area2",
                toolTip: "Area 2 Caption"
            },
            {
                key: "area3",
                toolTip: "Area 3 Caption"
            },
            {
                key: "area4",
                toolTip: "Area 4 Caption"
            }
        ]
    };
opts = $.extend({}, all_opts, initial_opts, single_opts);
map.mapster('unbind')
    .mapster(opts)
    .bind('mouseover', function () {
        if (!inArea) {
            // Registers mouse move over image
            map.mapster('set_options', all_opts)
                .mapster('set', true, 'all')
                .mapster('set_options', single_opts);
        }
    }).bind('mouseout', function () {
        if (!inArea) {
            map.mapster('set', false, 'all');
        }
    });

The array being read contains the Name (the name of the area), Left, Top, Right, Bottom, plus the actual data that I would like to display. I found the following code to copy the data into a Javascript array:

var myArray = [];

@foreach (var d in Model.data)
{
    @:myArray.push("@d");
}

Changing the Model.data to my own array Model.Areas but my knowledge of Javascript is limited and I couldn’t work out how to take this array and apply it to the areas dynamically.