var is_bouncing = {};
var active_popup = null;

// Dance, baby, dance!
function bounce_pin(x){
    if(is_bouncing[x] == true){
        return;
    }
    is_bouncing[x] = true
    $('#coc_map .canvas img.pin[rel=pin-' + x + ']')
        .effect("bounce", { times:4 }, 300, function(){
            is_bouncing[x] = false;
        })
}

// Display the detailed popup for a given pin
function big_popup(x){
    if(active_popup == 'big-'+x){
        // This popup is already the active one, do nothing.
        return;
    } else {
        hide_popups();
    }
    active_popup = 'big-'+x;
    popup = $('#coc_map .canvas .popup-big');
    pin = $('#coc_map .canvas img.pin[rel=pin-' + x + ']').offset();
    popup.css({left: (pin.left-79) + 'px', top: (pin.top-167) + 'px'})

    // Pop in our data
    data = map_data[x]
    popup.children('.title').html(data['title'])
    popup.children('.description').html(data['description'])
    if(!(data['image'] == '')){
        popup.children('.image').css({
            background: "url('" + data['image'] + "') no-repeat center",
            display: 'block'
        });
    } else {
        popup.children('.image').css('display', 'none');
    }
    if(!(data['url'] == '')){
        popup.children('a.website').attr('href', data['url']);
        popup.children('a.website').css('display', 'inline');
    } else {
        popup.children('a.website').css('display', 'none');
    }

    popup.fadeIn('slow');
}

// Display the small popup for a given pin
function small_popup(x){
    if(active_popup != null && (active_popup.split('-')[1] == x)){
        // this popup, or the big version, is already active. Do nothing.
        return;
    } else {
        hide_popups();
    }
    active_popup = 'small-'+x;
    popup = $('#coc_map .canvas .popup-small');
    pin = $('#coc_map .canvas img.pin[rel=pin-' + x + ']').offset();
    popup.css({left: (pin.left-15) + 'px', top: (pin.top-52) + 'px'})

    // Pop in out data
    data = map_data[x]
    popup.children('.building').html(data['building']);
    popup.children('.num_services').html(data['services'] + ' Services');

    popup.fadeIn('slow');
}

// Hide Popups
function hide_big_popups(){
    popup = $('#coc_map .canvas .popup-big')
    if(popup.is(':hidden') == false){
        popup.fadeOut('fast');
        active_popup = null;
    }
}

function hide_small_popups(){
    popup = $('#coc_map .canvas .popup-small')
    if(popup.is(':hidden') == false){
        popup.fadeOut('fast');
        active_popup = null;
    }
}

function get_index(obj){
    return $(obj).attr('rel').split('-')[1];
}

function hide_popups(){
    hide_big_popups();
    hide_small_popups();
}

// Let's rock 'n' roll
$(document).ready(function(){
    services_list = $('#coc_map .services ul')
    map_canvas = $('#coc_map .canvas')
    for(x in map_data){
        pin = map_data[x]

        // Elements
        //list_entry = $('<li rel="service-'+x+'">'+pin.title+'</li>')
        pin_image = $('<img src="images/pin-tip.png" class="pin" alt="'+pin.title+'" rel="pin-'+x+'">')
        pin_image.css({left: pin.x_pos+'px', top: pin.y_pos+'px', display: 'none'})

        // Append 'em
        //services_list.append(list_entry)
        map_canvas.append(pin_image)
        pin_image.fadeIn('slow')
    }

    $('#coc_map .canvas .pin')
            .mouseover(function(){ small_popup(get_index(this)) })
            .mouseout(function(){ hide_small_popups() })
            .click(function(){ big_popup(get_index(this)) });

    $('#coc_map .services li')
        .mouseover(function(){ bounce_pin(get_index(this)) })
        .click(function(){ big_popup(get_index(this)) });

    $('#coc_map .canvas .popup-big a.close').click(function(){ hide_big_popups() });

});