jQuery(function($) {
    var map_width = 297;
    var map_height = 380;
    
    var regions_elements = $('.outlets-list-region');
    var outlets_map = $('#outlets-map');
    
    $("#outlets-list").accordion({
        active: false,
        autoHeight: false,
        alwaysOpen: false
    });
    
    regions_elements.click(function(e) {
        var _this = $(this);
        
        $('.selected', outlets_map).fadeOut(function() { $(this).remove() });
        
        if (_this.data('selected')) {
            _this.data('selected', false);
        } else {
            _this.data('selected', true);
            
            var html = $('<div class="outlets-map-region selected"></div>');
            html.css('background-position', -map_width + 'px ' + (this.id.substring(13) * -map_height) + 'px');
            outlets_map.append(html);
            html.fadeIn();
        }
        
        console.log(_this.data('selected'));
    });
    
    regions_elements.hover(
        function(e) {
            var html = $('<div class="outlets-map-region hover"></div>');
            html.css('background-position', '0px ' + (this.id.substring(13) * -map_height) + 'px');
            outlets_map.append(html);
            html.fadeIn();
        }, function(e) {
            $('.hover', outlets_map).fadeOut(function() { $(this).remove() });
        }
    );
});