var doscroll = '1';

function showpanel(link, w, h , s) {

    doscroll = '1';
    if ( s == '0' )
        doscroll = '0';
    
 // get window size
    var Width = 0, Heigh = 0;
    if (typeof (window.innerWidth) == 'number') {
        //Non-IE
        Width = window.innerWidth;
        Heigh = window.innerHeight;
    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        //IE 6+ in 'standards compliant mode'
    Width = document.documentElement.clientWidth;
        Heigh = document.documentElement.clientHeight;
    } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        //IE 4 compatible
        Width = document.body.clientWidth;
        Heigh = document.body.clientHeight;
    }
        
    var divTag = document.createElement("div");
    divTag.id = "divpanel";
    divTag.setAttribute("align", "center");
    divTag.className = "panelclass";
    divTag.style.top =  0 + 'px';
    divTag.style.left =  0 + 'px';

// add a close elemnet here
    document.body.appendChild(divTag);


// create the iframe
    ifrm = document.createElement("iframe");
    ifrm.id = "panelframe";
    ifrm.setAttribute("src", link);
    
    ifrm.style.position = 'absolute';
    ifrm.style.top = "50px";
//    ifrm.style.left = "20%";
    ifrm.style.left = (Width - w) / 2 + "px";

    ifrm.style.backgroundColor = "#ffffff";
    
    ifrm.style.height = h + "px";
    ifrm.style.width = w + "px";
    
    ifrm.style.zIndex = 1005;
    document.body.appendChild(ifrm);
    //divTag.appendChild(ifrm);
    
 
 // close button   
     var img = document.createElement('img');
    img.id = "closeimg";
    img.src = 'http://www.speechflare.com/overlay/close_btn.png';
    /*img.src = 'overlay/close_btn.png';*/
    img.className = "buttonclass";

    img.style.position = 'absolute';
    img.style.top = "20px";
    img.style.left = (Width - w) / 2 + w - 30 + "px";

    img.onclick = removepanel;
    img.style.cursor = 'pointer';
   
    document.body.appendChild(img);
}

function removepanel() {
    var d = document.getElementById('divpanel');
    document.body.removeChild(d);

    var d1 = document.getElementById('panelframe');
    document.body.removeChild(d1);

    var d2 = document.getElementById('closeimg');
    document.body.removeChild(d2);
}

/*
function scrollpanel() {

    adjustPanel();
    return;


    // get window size
    var Width = 0, Heigh = 0;
    if (typeof (window.innerWidth) == 'number') {
        //Non-IE
        Width = window.innerWidth;
        Heigh = window.innerHeight;
    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        //IE 6+ in 'standards compliant mode'
        Width = document.documentElement.clientWidth;
        Heigh = document.documentElement.clientHeight;
    } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        //IE 4 compatible
        Width = document.body.clientWidth;
        Heigh = document.body.clientHeight;
    }
    // get scrolling
    var scrOfX = 0, scrOfY = 0;
    if (typeof (window.pageYOffset) == 'number') {
        //Netscape compliant
        scrOfY = window.pageYOffset;
        scrOfX = window.pageXOffset;
    } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
        //DOM compliant
        scrOfY = document.body.scrollTop;
        scrOfX = document.body.scrollLeft;
    } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
        //IE6 standards compliant mode
        scrOfY = document.documentElement.scrollTop;
        scrOfX = document.documentElement.scrollLeft;
    }



    // move the main div
    var divpanel = document.getElementById('divpanel');
    if ( divpanel == null )
        return;
        
    divpanel.style.top = scrOfY + 0 + 'px';
    divpanel.style.left = scrOfX + 0 + 'px';

    // move the iframe
    var framepanel = document.getElementById('panelframe');
    if (framepanel == null)
        return;
    //    framepanel.style.top = scrOfY + 50 + 'px';
    
    var wsize = framepanel.style.width;
    //var hsize = framepanel.style.height;

    var intwsize = ConvertCssPxToInt(wsize);
    var xoffset = (Width - intwsize) / 2;
    if (xoffset < 0)
        xoffset = 0;
    framepanel.style.left = scrOfX + xoffset + "px";
    framepanel.style.top = scrOfY + 50 + 'px';
    
    // move the close
    var closeimg = document.getElementById('closeimg');
    if (closeimg == null)
        return;

    var wsizeclose = closeimg.style.width;
    //var hsize = closeimg.style.height;

    var intwsizeclose = ConvertCssPxToInt(wsize);
    var xoffsetclose = (Width - intwsizeclose) / 2 + intwsizeclose - 30;
    if (xoffsetclose < 0)
        xoffsetclose = 0;
    closeimg.style.left = scrOfX + xoffsetclose + "px";
    closeimg.style.top = scrOfY + 20 + 'px';
}

function resisefunction() {

    adjustPanel();
    return;




    var framepanel = document.getElementById('panelframe');
    if (framepanel == null)
        return;

    // get window size
    var Width = 0, Heigh = 0;
    if (typeof (window.innerWidth) == 'number') {
        //Non-IE
        Width = window.innerWidth;
        Heigh = window.innerHeight;
    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        //IE 6+ in 'standards compliant mode'
        Width = document.documentElement.clientWidth;
        Heigh = document.documentElement.clientHeight;
    } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        //IE 4 compatible
        Width = document.body.clientWidth;
        Heigh = document.body.clientHeight;
    }

    // get scrolling
    var scrOfX = 0, scrOfY = 0;
    if (typeof (window.pageYOffset) == 'number') {
        //Netscape compliant
        scrOfY = window.pageYOffset;
        scrOfX = window.pageXOffset;
    } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
        //DOM compliant
        scrOfY = document.body.scrollTop;
        scrOfX = document.body.scrollLeft;
    } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
        //IE6 standards compliant mode
        scrOfY = document.documentElement.scrollTop;
        scrOfX = document.documentElement.scrollLeft;
    }

    // move the main div
    var divpanel = document.getElementById('divpanel');
    if (divpanel == null)
        return;

    divpanel.style.top = scrOfY + 0 + 'px';
    divpanel.style.left = scrOfX + 0 + 'px';

    // move the iframe
    var framepanel = document.getElementById('panelframe');
    if (framepanel == null)
        return;
    //    framepanel.style.top = scrOfY + 50 + 'px';

    var wsize = framepanel.style.width;
    //var hsize = framepanel.style.height;

    var intwsize = ConvertCssPxToInt(wsize);
    var xoffset = (Width - intwsize) / 2;
    if (xoffset < 0)
        xoffset = 0;
    framepanel.style.left = scrOfX + xoffset + "px";
    framepanel.style.top = scrOfY + 50 + 'px';

    // move the close
    var closeimg = document.getElementById('closeimg');
    if (closeimg == null)
        return;

    var wsizeclose = closeimg.style.width;
    //var hsize = closeimg.style.height;

    var intwsizeclose = ConvertCssPxToInt(wsize);
    var xoffsetclose = (Width - intwsizeclose) / 2 + intwsizeclose - 30;
    if (xoffsetclose < 0)
        xoffsetclose = 0;
    closeimg.style.left = scrOfX + xoffsetclose + "px";
    closeimg.style.top = scrOfY + 20 + 'px';    
}
*/

function ConvertCssPxToInt(cssPxValueText) {

    // Set valid characters for numeric number.
    var validChars = "0123456789.";

    // If conversion fails return 0.
    var convertedValue = 0;

    // Loop all characters of
    for (i = 0; i < cssPxValueText.length; i++) {

        // Stop search for valid numeric characters,  when a none numeric number is found.
        if (validChars.indexOf(cssPxValueText.charAt(i)) == -1) {

            // Start conversion if at least one character is valid.
            if (i > 0) {
                // Convert validnumbers to int and return result.
                convertedValue = parseInt(cssPxValueText.substring(0, i));
                return convertedValue;
            }
        }
    }

    return convertedValue;
}


function adjustPanel() {

    var framepanel = document.getElementById('panelframe');
    if (framepanel == null)
        return;

    // get window size
    var Width = 0, Heigh = 0;
    if (typeof (window.innerWidth) == 'number') {
        //Non-IE
        Width = window.innerWidth;
        Heigh = window.innerHeight;
    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        //IE 6+ in 'standards compliant mode'
        Width = document.documentElement.clientWidth;
        Heigh = document.documentElement.clientHeight;
    } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        //IE 4 compatible
        Width = document.body.clientWidth;
        Heigh = document.body.clientHeight;
    }

    // get scrolling
    var scrOfX = 0, scrOfY = 0;
    if (typeof (window.pageYOffset) == 'number') {
        //Netscape compliant
        scrOfY = window.pageYOffset;
        scrOfX = window.pageXOffset;
    } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
        //DOM compliant
        scrOfY = document.body.scrollTop;
        scrOfX = document.body.scrollLeft;
    } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
        //IE6 standards compliant mode
        scrOfY = document.documentElement.scrollTop;
        scrOfX = document.documentElement.scrollLeft;
    }

    // move the main div
    var divpanel = document.getElementById('divpanel');
    if (divpanel == null)
        return;

    divpanel.style.top = scrOfY + 0 + 'px';
    divpanel.style.left = scrOfX + 0 + 'px';

    // move the iframe
    var framepanel = document.getElementById('panelframe');
    if (framepanel == null)
        return;
    //    framepanel.style.top = scrOfY + 50 + 'px';

    var wsize = framepanel.style.width;
    //var hsize = framepanel.style.height;

    var intwsize = ConvertCssPxToInt(wsize);
    var xoffset = (Width - intwsize) / 2;
    if (xoffset < 0)
        xoffset = 0;
    framepanel.style.left = scrOfX + xoffset + "px";
    framepanel.style.top = scrOfY + 50 + 'px';

    // move the close
    var closeimg = document.getElementById('closeimg');
    if (closeimg == null)
        return;

    var wsizeclose = closeimg.style.width;
    //var hsize = closeimg.style.height;

    var intwsizeclose = ConvertCssPxToInt(wsize);
    var xoffsetclose = (Width - intwsizeclose) / 2 + intwsizeclose - 30;
    if (xoffsetclose < 0)
        xoffsetclose = 0;
    closeimg.style.left = scrOfX + xoffsetclose + "px";
    closeimg.style.top = scrOfY + 20 + 'px';
}
/*
window.onload = function() {

var styles = "@import url('http://localhost:2828/WebSite1/overlay/overlaypanel.css')";
    var newSS = document.createElement('link');
    newSS.rel = 'stylesheet';
    newSS.href = 'data:text/css,' + escape(styles);
    document.getElementsByTagName("html")[0].appendChild(newSS);


//document.write("<script type='texts/javascript' src='http://localhost:2828/WebSite1/overlay/overlaypanel.css'>  </ scripts " + ">") 
 return;
   
    var oLink = document.createElement("link")
    oLink.href = "overlay/overlaypanel.css";
    oLink.rel = "stylesheet";
    oLink.type = "text/css";
    document.body.appendChild(oLink);



    if (typeof (window.innerWidth) == 'number') {
        //Non-IE
        //Width = window.innerWidth;
        //Heigh = window.innerHeight;
    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        //IE 6+ in 'standards compliant mode'
        //Width = document.documentElement.clientWidth;
        //Heigh = document.documentElement.clientHeight;
    var oLink = document.createElement("link")
    oLink.href = "overlay/overlaypanel.css";
    oLink.rel = "stylesheet";
    oLink.type = "text/css";
    document.body.appendChild(oLink);
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        //IE 4 compatible
        //Width = document.body.clientWidth;
        //Heigh = document.body.clientHeight;
    }
}
*/

window.onscroll = function() {
    if ( doscroll == "1" )
        adjustPanel();
}
window.onresize = function() {
    adjustPanel();
}