var location_wrapper    = '.location-wrapper';
var location_details    = '.location-details';
var location_link       = '.location';
var location_height     = '267px';

var continent_wrapper   = '.continent-wrapper';
var continent_details   = '.continent-details';
var continent_link      = '.continent';
var continent_height    = '170px';

var fadeSpeed           = 'slow';
var selectedClass       = 'selected';

$(function(){

    // init
    showContinent($(continent_link).first().attr('href'));
    $(continent_wrapper).css({'position': 'relative', 'height': continent_height});
    $(continent_details).css('position', 'absolute');
    $(location_wrapper).css({'position': 'relative', 'height': location_height});
    $(location_details).css('position', 'absolute');
    
    // triggers
    $(location_link).click(function() {
        var $link = $(this);
        showLocation($link.attr('href'));
        
        $(location_link).removeClass(selectedClass);
        $link.addClass(selectedClass);
        
        return false;
    })
    
    $(continent_link).click(function() {
        var $link = $(this);
        showContinent($link.attr('href'));
        
        $(continent_link).removeClass(selectedClass);
        $link.addClass(selectedClass);
        
        return false;
    })
    
});

function showLocation(id) {
    var $location = $(id + location_details);
    $(location_details).not($location).fadeOut(fadeSpeed, function() {
        $location.fadeIn(fadeSpeed);
    });
}

function showContinent(id) {
    var $continent = $(id + continent_details);
    $(continent_details).not($continent).fadeOut(fadeSpeed, function() {
        $continent.fadeIn(fadeSpeed);
        showLocation($(location_link, $continent).first().attr('href'));
    });
}