jQuery.noConflict(); 

//global variables to establish which regions parts/map parts are currently active
var elemOnReg;
var elemOnMap;

jQuery(document).ready(function(){

     //we only want the blank map showing on page load.
     jQuery('img.map').hide;  

    setRegion();
});

//this function sees wheteher the URL is for a particular region.
//If so, we need to make the appropriate region parts/map parts active and set global variables accordingly.
function setRegion()
{
    var af = '671';
    var am = '672';
    var as = '673';
    var au = '674';
    var eu = '675';
    var me = '676';

    var sMenuItem = document.location.href.toLowerCase();
    
    if(sMenuItem.indexOf('#af') > 0 || sMenuItem.indexOf('671.html') > 0 || sMenuItem.indexOf('africa.html') > 0)
    {
        jQuery('img#map-af').stop(true, true).fadeIn('slow');
        document.getElementById('region-af').style.display = 'block';
        elemOnReg = 'region-af';
        elemOnMap = 'map-af';
        
        showContentAjax('af');
    }
    else if(sMenuItem.indexOf('#am') > 0 || sMenuItem.indexOf('672.html') > 0 || sMenuItem.indexOf('americas.html') > 0)
    {
        jQuery('img#map-am').stop(true, true).fadeIn('slow');
        document.getElementById('region-af').style.display = 'block';
        elemOnReg = 'region-am';
        elemOnMap = 'map-am';

        showContentAjax('am');
    }
    else if(sMenuItem.indexOf('#au') > 0 || sMenuItem.indexOf('674.html') > 0 || sMenuItem.indexOf('australasia.html') > 0)
    {
        jQuery('img#map-au').stop(true, true).fadeIn('slow');
        document.getElementById('region-af').style.display = 'block';
        elemOnReg = 'region-au';
        elemOnMap = 'map-au';
        
        showContentAjax('au');
    }
    else if(sMenuItem.indexOf('#as') > 0 || sMenuItem.indexOf('673.html') > 0 || sMenuItem.indexOf('asia.html') > 0)
    {
        jQuery('img#map-as').stop(true, true).fadeIn('slow');
        document.getElementById('region-af').style.display = 'block';
        elemOnReg = 'region-as';
        elemOnMap = 'map-as';
        
        showContentAjax('as');
    }
    else if(sMenuItem.indexOf('#eu') > 0 || sMenuItem.indexOf('675.html') > 0 || sMenuItem.indexOf('europe.html') > 0)
    {
        jQuery('img#map-eu').stop(true, true).fadeIn('slow');
        document.getElementById('region-af').style.display = 'block';
        elemOnReg = 'region-eu';
        elemOnMap = 'map-eu';
        
        showContentAjax('eu');
    }
    else if(sMenuItem.indexOf('#me') > 0 || sMenuItem.indexOf('676.html') > 0 || sMenuItem.indexOf('middleeast.html') > 0)
    {
        jQuery('img#map-me').stop(true, true).fadeIn('slow');
        document.getElementById('region-af').style.display = 'block';
        elemOnReg = 'region-me';
        elemOnMap = 'map-me';
        
        showContentAjax('me');
    }
}

//Show appropriate region parts/map parts on click
function showContent(region){
    elem = 'region-' + region;
    if(elemOnReg != null)
    {
        document.getElementById(elemOnReg).style.display = 'none';
    }
    jQuery('img#' + elemOnMap).hide();
    elemOnReg = elem;
    elemOnMap = 'map-' + region;
    document.getElementById(elem).style.display = 'block';
    jQuery('img#map-' + region).show();
}

//Show appropriate region parts/map parts on click
function showContentAjax(region){

    jQuery.post(
        '/common/xml/LocationRegion.ashx?locRef=' + region,
        '',
        function(data) {
            $myData = data;

            jQuery('div.region-text h2').html(jQuery($myData).find('locTitle').text());
            jQuery('div.region-text div').html(jQuery($myData).find('locCopy').text());
            
            $Nodes = jQuery($myData).find('country');
            var $count = $Nodes.length;
            var $i = 0;
            var $left = '';
            var $right = '';

            $Nodes.each(
                function(index)
                {
                    $Nodes2 = jQuery(this).find('townLocation');
                    var $link = '';
                    if($i <= ($count / 2))
                    {
                        $left += '<p class="country-location">';
                        $left += '<span class="country-location-title">';
                        $left += '<a href="/countrydetail.aspx?m=' + jQuery(this).find('countryLocation').attr('menuID') + '">' + jQuery(this).find('countryLocation').text() + '</a>';
                        $left += '</span><br />';
                        $Nodes2.each(
                            function(index)
                            {
                                $link = jQuery(this).attr('menuID');
                                $left += '<span class="country-location-city">';
                                $left += '<a href="/OfficeDetail.aspx?m=' + $link + '">' + jQuery(this).text() + '</a>';
                                $left += '</span><br />';
                            }
                            
                        );
                        $left += '</p>';
                    }
                    else
                    {
                        $right += '<p class="country-location">';
                        $right += '<span class="country-location-title">';
                        $right += '<a href="/countrydetail.aspx?m=' + jQuery(this).find('countryLocation').attr('menuID') + '">' + jQuery(this).find('countryLocation').text() + '</a>';
                        $right += '</span><br />';
                        $Nodes2.each(
                            function(index)
                            {
                                $link = jQuery(this).text().toLowerCase().replace(' ', '');
                                $right += '<span class="country-location-city">';
                                $right += '<a href="' + $link + '.html">' + jQuery(this).text() + '</a>';
                                $right += '</span><br />';
                            }
                        );
                        $right += '</p>';
                    }
                    $i++;
                }
            );

            jQuery('div.region-list div div.left').html($left);
            jQuery('div.region-list div div.right').html($right);
            
            jQuery('div#region-af').css('display','block');
            
            elem = 'region-' + region;
            if(elemOnReg != null)
            {
                jQuery(elemOnReg).css('display','none');
            }
            jQuery('img#' + elemOnMap).hide();
            elemOnReg = elem;
            elemOnMap = 'map-' + region;
            jQuery(elem).css('display','block');
            jQuery('img#map-' + region).show();
    });
}