var states = ['bw','bay','b','bb','bre','hh','he','mvp','nie','nrw','rp','saa','sx','sxa','sh','th'];

$(document).ready(function() {
    for (var i = 0; i < states.length; i++) {
        $('#area-' + states[i]).bind('mouseover', {y:(i + 1) * 490}, function(ev) {
            $('#german-map').css('background-position', '0 -' + ev.data.y + 'px');
        });
        $('#area-' + states[i]).mouseout(function(ev) {
            var rt = ev.relatedTarget;
            if ($(rt).parents().filter('#states-and-cities').length == 0) {
                $('#german-map').css('background-position', '0 0');
            }
        });

        var stateListName = '#name-' + states[i];
        $(stateListName).bind('mouseover', {
            y:(i + 1) * 490, stateListName:stateListName
        }, function(ev) {
            var t = ev.target;
            $('#german-map').css('background-position', '0 -' + ev.data.y + 'px');
            var li = $(t).parents().andSelf().filter(ev.data.stateListName).eq(0);
            $(li).children('.cities').show();
        });

        $(stateListName).bind('mouseout', {stateListName:stateListName}, function(ev) {
            var t = ev.target;
            var rt = ev.relatedTarget;
            var li = $(t).parents().andSelf().filter(ev.data.stateListName).eq(0);
            if ($(rt).parents().andSelf().filter(ev.data.stateListName).length == 0) {
                $(li).children('.cities').hide();
            }
            if ($(rt).parents().andSelf().filter('#area-' + stateListName).length == 0) {
                $('#german-map').css('background-position', '0 0');
            }
        });

    }
});