/**
*   Show / Hide the overlay tab for extra info/search etc.
**/
function swap(div, bDisplay){
    $(div).style.display = bDisplay ? 'block' : 'none';
    
    oMapObjects._bEnableHover = !bDisplay;
    
    
    /**
    *   Add listener to map to close the tab when clicked
    **/
    if ( bDisplay ) {
        if ( oMapObjects.oListener == null ) {
            window.setTimeout(closeTabClick, 1);
        }
        oMapObjects.oMap.getContainer().className = '';
    } else {
        /** remove the click listener if possible **/
        /** remove the click listener if possible **/
        try { oMapObjects.oListener.remove(); } catch(e){}
        try { GEvent.removeListener(oMapObjects.oListener);  } catch(e){}
        oMapObjects.oListener = null;
        activate('tabMap');
        oMapObjects.oMap.getContainer().className = 'active';
    }
}

function closeTabClick(){
    oMapObjects.oListener = GEvent.addListener(oMapObjects.oMap, 'click', function(){
        activate('tabMap');
        swap('tab',false); 
        try { oMapObjects.oListener.remove(); } catch(e){}
        try { GEvent.removeListener(oMapObjects.oListener);  } catch(e){}
        oMapObjects.oListener = null;
    });
}

/**
*   Change classname for sTab.
*   Used to color the tab.
**/
function activate(sTab){
    var aTabs = $('tabs').getElementsByTagName('div');
    for ( var sCurTab in aTabs ) {
        if ( sTab == aTabs[sCurTab].id ) {
            aTabs[sCurTab].className = 'active';
        } else if ( aTabs[sCurTab].className == 'active' ) {
            aTabs[sCurTab].className = '';
        }
    }
}

/**
*   Handle the menu tabs.
**/
function m_activate(sTab){
    if(sTab == 'route'){
        $('button').className='';
        $('route').className='active';
        $('GeoMenu_items').style.display = 'none';
        $('GeoDirections').style.display = 'block';
    } else {
        $('button').className='active';
        $('route').className='';
        $('GeoMenu_items').style.display = 'block';
        $('GeoDirections').style.display = 'none';
    }
}

/**
*   In the main info tab, there are 3 divs. Use this to activate the correct div.
**/
function setTabContent(sBlock){
    var aBlocks = new Object();
    aBlocks['search'] = document.getElementById('tab_contents_search');
    aBlocks['info'] = document.getElementById('tab_contents_info');
    aBlocks['list'] = document.getElementById('tab_contents_list');
    aBlocks['contact'] = document.getElementById('tab_contents_contact');
    aBlocks['colofon'] = document.getElementById('tab_contents_colofon');
    
    if ( sBlock != 'search' ) {
        var eCurTab = $('sCurTab');
        eCurTab.value = sBlock;
    }
    for ( var sId in aBlocks ) {
        aBlocks[sId].style.display = 'none';
    }    
    aBlocks[sBlock].style.display = 'block';
    
}

/**
*   Function for fluid design. 
**/                     
function resizer() {
      var myWidth = 0, myHeight = 0;
      if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
      } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
      } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
      }      
      document.getElementById('GeoMap').style.width =   ( myWidth   - 307 ) + 'px';
      document.getElementById('GeoMap').style.height =  ( myHeight  - 102 ) + 'px';
      document.getElementById('GeoMenu').style.height = ( myHeight  - 102 ) + 'px';
      document.getElementById('GeoMenu_items').style.height = ( myHeight  - 102 ) + 'px';
      document.getElementById('GeoDirections').style.height = ( myHeight  - 102 ) + 'px';
//    document.getElementById('routeResult').style.height = ( myHeight  - 433 ) + 'px';
      document.getElementById('tab').style.height =     ( myHeight  - 102 ) + 'px';
      if ( myWidth < 905 ) myWidth = 905;
      
      document.getElementById('tabMap').style.width = ( myWidth  - 904 ) + 'px';

      /** Try/catch because this function is called before the creation of the map object **/
      try {
        oMapObjects.oMap.checkResize();
      } catch(e) { }
}                     
/** Call the function on resize **/
onresize = resizer



/** 
*   The tab title is dynamic and can contain 'Detail pagina' and 'Locatie overzicht' 
*   This function reads input#sCurTab.value to check what was loaded last.
**/
function tabTitleClick(){
    var sCurTab = $('sCurTab').value;
    
    setTabContent(sCurTab);
    activate('tabTitle');
    swap('tab', true);
}