$(document).ready(BindInfo);

function BindInfo(){
    cities = new Array();
    cities = $(document).find('.city');
    for (i = 0; i<cities.length; i++){
        city = cities[i].id;
        cityid = '#' + cities[i].id;
        $(cityid).bind("mouseenter", function(){
            infoId = '#' + $(this).context.id + 'Info';

            expanded = new Array();
            expanded = $(document).find('.expanded');
            for ( k = 0; k < expanded.length; k++ ){
                expId = '#' + expanded[k].id;
                $(expId).removeClass('expanded');
            }
            $(this).addClass('expanded');
            $(infoId).addClass('expanded');
            $(infoId).bind('mouseleave',function(){
                $(this).removeClass('expanded');
                expcityId = '#' + $(this).context.id.replace('Info','');
                $(expcityId).removeClass('expanded');
            })
           
        })
    }
}