//  interval[]: is an array of id's to be used
//  by clearInterval(id) and clearTimeout(id) 
//  to stop certain events from firing
var interval = new Array();

// gaia_map: creates a map object
var gaia_map = function() {
  var that;
  that = {
    current : 1,
    total : 8,
    change_region : function(id){
        $('.map_list_arrow_on').not('#map_list_arrow_on_'+id).fadeOut(400);
        $('#map_list_arrow_on_'+id).fadeIn(400);
        $('#map_on_'+id).fadeIn(400).siblings().fadeOut(400);
        $('.map_update').not('#map_update_'+id).fadeOut(400);
        $('#map_update_'+id).fadeIn(400).siblings().fadeOut(400);
            },
    increment : function(){
        that.change_region(that.current);
        if(that.current >= that.total) {
            that.current = 1;
        }else{
            that.current++;
        }
    }
  };
  return that;
};

//  map: an instance of the gaia_map() object described above
var map = gaia_map();

//  map_over(map_over_id): changes the active region
//  on the map, if the user hovers over a link
//  for a long enough period of time.
var map_over = function(map_over_id){
    var id  = map_over_id;
    interval[id] = setTimeout(function(){
        map.change_region(id);
    },400);
    clearInterval(interval['auto']);
}

//  map_out(map_out_id): clears the timeout
//  so the map_over() function won't fire when the 
//  
var map_out = function(map_out_id){
    var id = map_out_id;
    clearTimeout(interval[id]);
}

// initialize_map: sets up the auto-rotator,
// and hook up the mouseover and mouseout events
// fot the regions to the map object.
var initialize_map = function(){

    //  initialize the auto-rotatar, which
    //  cycles through the regions one at a time
    //  until the user begins interacting with the map
    interval['auto'] = setInterval(map.increment,3000);
    $('[href ="gaiaglobal"]').mouseover(function(){
        map_over(1);
    });
    
    //  make the mouseover event for each region
    //  be linked to the map_over($region) function
    $('[href ="africa"]').mouseover(function(){
        map_over(2);
    });
    $('[href ="asia-pacific"]').mouseover(function(){
            map_over(3);
    });
    $('[href ="europe"]').mouseover(function(){
            map_over(4);
    });
    $('[href ="latinamericaandthecaribbean"]').mouseover(function(){
            map_over(5);
    });
    $('[href ="espanol"]').mouseover(function(){
            map_over(6);
    });
    $('[href ="middleeastandnorthafrica"]').mouseover(function(){
            map_over(7);
    });
    $('[href ="usandcanada"]').mouseover(function(){
            map_over(8);
    });

    
    //  make the mouseout event for each region
    //  be linked to the map_over($region) function
    $('[href ="gaiaglobal"]').mouseout(function(){
        map_out(1);
    });
    $('[href ="africa"]').mouseout(function(){
        map_out(2);
    });
    $('[href ="asia-pacific"]').mouseout(function(){
            map_out(3);
    });
    $('[href ="europe"]').mouseout(function(){
            map_out(4);
    });
    $('[href ="latinamericaandthecaribbean"]').mouseout(function(){
            map_out(5);
    });
    $('[href ="espanol"]').mouseout(function(){
            map_out(6);
    });
    $('[href ="middleeastandnorthafrica"]').mouseout(function(){
            map_out(7);
    });
    $('[href ="usandcanada"]').mouseout(function(){
            map_out(8);
    });

 };
 
 //  Sanitize the environment
 //  and run the code when the browser loads!
jQuery(function($){
    if (!$.browser.msie) $('body').css('opacity', 0.9999);
    initialize_map();
});