$(function () {

    var urls = [
             'district_13'
            ,'district_4'
            ,'district_9'
            ,'district_10'
            ,'district_11'
            ,'district_12'
            ,'district_14'
            ,'district_15'
    ];

    $.preload( urls, {
            base:'/public/images/maps/',
            ext:'.jpg'
    });

    $('#map area').click(function() {
            var area = $(this);
            var district = $('#district');
            var bg = '/public/images/maps/' + area.attr('id') + '.jpg';
            district.css({'background-image': 'url(' + bg + ')'});
            district.fadeIn();

            $('.' + area.attr('id')).fadeIn('slow');
    });

    $('#district').click(function() {
            var district = $('#district');
            district.fadeOut('slow');
            $('.point').hide();
    });

    $('.point').each(function() {
       var point = $(this);
       var ofset = $('#region_map').position();
       var positions = point.attr('id');
       var pos = positions.split('_');
       var left = Number(pos[0]) + Number(ofset.left);
       var top = Number(pos[1]) + Number(ofset.top) - 10;
       point.css({'left': left, 'top': top});
    });

    $('.point').hover(function() {
            $(this).find('div').show();
    },
    function() {
            $(this).find('div').fadeOut();
    });

    $("#body .right div.title:first").addClass("active");
    $("#body .right div.con:not(:first)").hide();

    $("#info div.title").click(function(){        
        $(this).next("div.con").slideToggle(1000)
        .siblings("div.con:visible").slideUp(1000);
        $(this).siblings("div.title").removeClass("active");
        $(this).toggleClass("active");
    });

});