Two-way syncing of hovers between map areas and object list

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/franceLow.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
<div id="listdiv"></div>

CSS

body {
    font-size: 12px;
    font-family: Verdana;
    padding: 10px;
}
#chartdiv {
	width	: 70%;
	height	: 500px;
    float: left;
}
#listdiv {
	width	: 25%;
	height	: 500px;
    float: left;
    margin-left: 10px;
    border-left: 1px solid #bbb;
}
#listdiv li a {
    padding: 3px 10px;
    display: block;
    cursor: pointer;
}

#listdiv li a:hover, #listdiv li a.selected {
    background: #bbb;
    color: #fff;
}

JavaScript

var map = AmCharts.makeChart("chartdiv", {
	"type": "map",
    "theme": "none",
    "pathToImages": "http://www.amcharts.com/lib/3/images/",

	"dataProvider": {
     "map": "chile",
		"getAreasFromMap": true
	},
	"areasSettings": {
		"autoZoom": true,
		"selectedColor": "#CC0000"
	},
    "objectList": {
        "container": "listdiv"
    }
});

// using events to highlight object list item
var currentItem;

map.addListener("rollOverMapObject", function (event) {
    var list = document.getElementById('listdiv').getElementsByTagName('a');
    for (var key in list) {
        if (list[key].innerText == event.mapObject.title) {
            list[key].className = 'selected';
            currentItem = list[key];
        }
    }
});

map.addListener("rollOutMapObject", function (event) {
    currentItem.className = '';
});