function getViewPortSize(dir)
{
    switch(dir)
    {
    case 'width':
        // all except Explorer
        if (self.innerWidth)
        {
             return self.innerWidth;
        }
        // Explorer 6 Strict Mode
        else if (document.documentElement && document.documentElement.clientWidth)
        {
             return document.documentElement.clientWidth; 
        }
        // other Explorers
        else if (document.body)
        {
             return document.body.clientWidth;
        }
    case 'height':
        // all except Explorer
        if (self.innerHeight)
        {
             return self.innerHeight;
        }
        // Explorer 6 Strict Mode
        else if (document.documentElement && document.documentElement.clientHeight)
        {
             return document.documentElement.clientHeight;
        }
        // other Explorers
        else if (document.body)
        {
             return document.body.clientHeight;
        }
    }
}



function alignCentre(elementID)
{
    x = document.getElementById(elementID);
    
    var vpWidth = getViewPortSize('width');
    var vpHeight= getViewPortSize('height');

    //get dialog's width and height
    dialogWidth = x.offsetWidth;
    dialogHeight = x.offsetHeight;

    //calculate position
    dialogTop = (vpHeight / 2) - (dialogHeight / 2);
    dialogLeft = (vpWidth / 2) - (dialogWidth / 2);

    //Position the Dialog
    x.style.top = dialogTop + 'px';
    //alert(dialogTop);
    x.style.left = dialogLeft + 'px';
    //alert(dialogLeft);
}



function showPopup(sourceID)
{     
    var element = document.getElementById(sourceID);    
       
    if(element.style.display == 'none')
    {
        element.style.display = 'block';
        element.style.zIndex = '901';        
    }
    else
    {
        element.style.display = 'none';
        element.style.zIndex = '-901';        
    }
    
//    function createDivElement(elementID)
//    {
//        if (!document.getElementById(elementID))
//        {    
//            var newdiv = document.createElement('div');
//            newdiv.setAttribute('id', elementID);
//            document.body.appendChild(newdiv);
//        }
//    }
    
//    createDivElement('popupbox');
//    createDivElement('popupOpacity');
//       
//    document.getElementById('popupMessage').style.display = 'block';
//    document.getElementById('popupMessage').style.zIndex = '901';
//    document.getElementById('popupMessage').innerHTML = '<div id=\'popupMessageCloseWrapper\'><input type=button onclick=\'hidePopup();\' value=\'Close\' /></div>';
//    document.getElementById('popupMessage').innerHTML += document.getElementById(sourceID).innerHTML;
//    document.getElementById('popupMessage').innerHTML += '<br /><br /><div id=\'popupMessageCloseWrapper\'><input type=button onclick=\'hidePopup();\' value=\'Close\' /></div>';
//    document.getElementById('popupOpacity').style.display = 'block';
//    document.getElementById('popupOpacity').style.zIndex = '900';  
    
//    alignCentre('popupMessage');
//    document.getElementById('popupbox').style.display = 'block';          
        
        
}

function hidePopup()
{  
    //document.getElementById('popupMessage').style.display = 'none';
    //document.getElementById('popupOpacity').style.display = 'none';    
}