//
// 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 pageContainer = document.getElementById("pageContainer");
    var pageContainerHeader = document.getElementById("pageContainerHeader");
    var pageContainerFooter = document.getElementById("pageContainerFooter");
    var pageContainerContents = document.getElementById("pageContainerContents");
    var pageContainerContents_Left = document.getElementById("pageContainerContents_Left");
    var pageContainerContents_Right = document.getElementById("pageContainerContents_Right");
             
    //get fixed heights
    var heightContainerHeader = pageContainerHeader.offsetHeight;
    var heightContainerFooter = pageContainerFooter.offsetHeight;
       
    //calculate heights
    pageContainer.style.height = documentHeight + "px";
    var calculatedHeight = documentHeight - (heightContainerHeader + heightContainerFooter);

    pageContainerContents.style.height = calculatedHeight + "px";
    pageContainerContents_Left.style.height = calculatedHeight + "px";
    pageContainerContents_Right.style.height = calculatedHeight + "px";
}

//
// 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) - (2*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) + 35) + "px";
    floatingLogo.style.left = (GetPostionX(idHeader)) + "px";
    floatingLogo.style.position = "absolute";

    //floating marks
    var floatingMarks = document.getElementById("idFloatingMarks");
    var idFooter = document.getElementById("idFooter");

    floatingMarks.style.top = (GetPostionY(idFooter) - 20) + "px";
    floatingMarks.style.left = (GetPostionX(idFooter) + idFooter.offsetWidth - floatingMarks.offsetWidth - 10) + "px";
    floatingMarks.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";
}