//
// Initialises the web page (called in onload event of body element).
// 
function InitialisePage() {
    //ReflectDocumentHeight();
    PositionFloatingElements();
}

//
// Depending on the document's height the controls are resized accordingly.
// This method must be called as a response to the onload and onresize events.
// 
//
// Remarks:
//   When the height of an elemement is defined in an external CSS file it can't
//   be read by using "element.style.height"; it can be done by using
//   element.offsetHeight!
// 
function ReflectDocumentHeight()
{               
    //get document height
    //var documentHeight = document.documentElement.clientHeight;
       
    //get reference to all height-related elements
    //var mainTable = document.getElementById( "idMainTable" );            
    //var topTable = document.getElementById( "idTopTable" );
    //var middleTable = document.getElementById( "idMiddleTable" );
    //var footer = document.getElementById("idFooter");
             
    //get relevant heights
    //var heightTopTable = topTable.offsetHeight;
    //var heightSum = heightTopTable + footer.offsetHeight;  //height footer = 24    
       
    //calculate heights
    //mainTable.style.height = documentHeight + "px"; //px has to be added for FireFox                
    
    //if ( documentHeight - heightSum > 0 )
    //{
    //    middleTable.style.height = (documentHeight - heightSum) + "px"; //px has to be added for FireFox                        
    //}  
}

//
// Positions the floating menu and logo.
// 
//
// Remarks:
//   The floating menu is positioned relative to the footer:
//   - Y direction: (top side of footer) - (3 x height of menu item) + (overlap with footer) -> X + 72 - 10
//   - X direction: (left side of footer) + (width of products menu) - (width of floating menu) -> X + 166 - 128
//   The floating log is positioned relative to the header:
//   - Y direction: (top side of header) + (offset) -> X + 15
//   - X direction: (left side of header) + (offset) -> X + 10
//
function PositionFloatingElements()
{
    //floating menu
    var floatingMenu = document.getElementById( "idFloatingMenuContainer" );   
    var idFooter = document.getElementById( "idFooter" );  
    var floatingMenuItem = document.getElementById("ctl00_idFloatingMenuItem1"); 
    var productsMenu = document.getElementById("idProducts");
      
    floatingMenu.style.top = (GetPostionY(idFooter) - (3*floatingMenuItem.offsetHeight) + 10) + "px";
    floatingMenu.style.left = (GetPostionX(idFooter) + productsMenu.offsetWidth - floatingMenu.offsetWidth) + "px";
    floatingMenu.style.position = "absolute";
    
    //floating logo
    var floatingLogo = document.getElementById( "idFloatingLogo" );
    var idHeader = document.getElementById( "idHeader" );
         
    floatingLogo.style.top = (GetPostionY(idHeader) + 15) + "px";
    floatingLogo.style.left = (GetPostionX(idHeader) + 8) + "px";
    floatingLogo.style.position = "absolute"; 
}

//
// Get absolute Y position of element.
//
function GetPostionY( element )
{
    var position = 0;
    
    while( element != null ) 
    {
        position += element.offsetTop;
        element = element.offsetParent;
    }
    
    return position;
}

//
// Get absolute X position of element.
//
function GetPostionX( element )
{
    var position = 0;
    
    while( element != null ) 
    {
        position += element.offsetLeft;
        element = element.offsetParent;
    }
    
    return position;
}

function ShowMap() {
    var directionsPopup = document.getElementById("ctl00_placeHolderContent_divMap");
    var directionsButton = document.getElementById("idButtonShowMap");
    
    //PositionControlRelative("idButtonShowMap", "ctl00_placeHolderContent_divMap", (directionsButton.offsetWidth / 2), (-10 - directionsPopup.offsetHeight));

    directionsPopup.style.visibility = "visible";
}

function HideMap() {
    var directionsPopup = document.getElementById("ctl00_placeHolderContent_divMap");

    directionsPopup.style.visibility = "hidden";
}