window.size = function() {

    var w = 0;
    var h = 0;

    //IE
    if (!window.innerWidth) {
        //strict mode
        if (!(document.documentElement.clientWidth == 0)) {
            w = document.documentElement.clientWidth;
            h = document.documentElement.clientHeight;
        }
        //quirks mode
        else {
            w = document.body.clientWidth;
            h = document.body.clientHeight;
        }
    }

    //w3c
    else {
        w = window.innerWidth;
        h = window.innerHeight;
    }

    return { width: w, height: h };
}

window.center = function() {

    var hWnd = (arguments[0] != null) ? arguments[0] : { width: 0, height: 0 };
    var _x = 0;
    var _y = 0;
    var offsetX = 0;
    var offsetY = 0;

    //IE
    if (!window.pageYOffset) {
        //strict mode
        if (!(document.documentElement.scrollTop == 0)) {
            offsetY = document.documentElement.scrollTop;
            offsetX = document.documentElement.scrollLeft;
        }
        //quirks mode
        else {
            offsetY = document.body.scrollTop;
            offsetX = document.body.scrollLeft;
        }
    }

    //w3c
    else {
        offsetX = window.pageXOffset;
        offsetY = window.pageYOffset;
    }

    _x = ((this.size().width - hWnd.width) / 2) + offsetX;
    _y = ((this.size().height - hWnd.height) / 2) + offsetY;

    return { x: _x, y: _y };
}

function AutoPlay_PopUp() {

    var point = window.center({ width: 1, height: 1 });
    var e1, e2, e3, e4, e5, e6, e7, e8, e9, e10, e11, e12,e13
    var xDelta = 0, yDelta = 0;
    var xStart = 0, yStart = 0;

    this.id = 'myPopUp'
    this.width = 400;
    this.height = 400;
    
    // centered
    this.top = point.y - this.height / 2;
    this.left = point.x - this.width / 2;
    
    // absolute positioning
    //this.top = 50; 
    //this.left = 50;  
    
    this.theme = 'grey';
    this.themeURL = 'http://vv.autoplay.co.nz/themes/'
    this.themeColour = '#C7C7C7'

    this.title = '';
    this.content = '';

    this.Show = Show;
    this.Hide = Hide;
   
    function GetElement(id, top, left, width, height, url, repeat) {

        dv = document.createElement('div');
        dv.setAttribute('id', id);
        dv.innerHTML = ' ';
        dv.style.position = 'absolute';
        dv.style.top = top + 'px';
        dv.style.left = left + 'px';
 
        if (width != undefined) { dv.style.width = width + 'px' };
        if (height != undefined) { dv.style.height = height + 'px' };
        if (url != undefined) { dv.style.backgroundImage = 'url(' + url + ')' };
        if (repeat != undefined) { dv.style.backgroundRepeat = repeat } else { dv.style.backgroundRepeat = 'no-repeat' };

        return dv;

    }

    function Show() {

        // add closebox CSS hover

        var s = '#' + this.id + '_Close {background:url(' + this.themeURL + this.theme + '/close1.png) no-repeat;} #' + this.id + '_Close:hover {background:url(' + this.themeURL + this.theme + '/close2.png) no-repeat;}';
        
        css = document.createElement('style');
        css.setAttribute('type', 'text/css');

        if (css.styleSheet) {   // IE
            css.styleSheet.cssText = s;
        } else {                // the world
            css.appendChild(document.createTextNode(s));
        }

        document.getElementsByTagName("head")[0].appendChild(css)
        
        // add other elements
            
        e1 = GetElement(this.id + '_Container', 0, 0);
        e2 = GetElement(this.id + '_Box', this.top, this.left);
        e3 = GetElement(this.id + '_TopLeft', 0, 0, 9, 28, this.themeURL + this.theme + '/top-left.png');
        e4 = GetElement(this.id + '_Title', 0, 9, this.width, 28, this.themeURL + this.theme + '/top-middle.png', 'repeat-x');
        e5 = GetElement(this.id + '_TopLeft', 0, this.width + 9, 15, 28, this.themeURL + this.theme + '/top-right.png')
        e6 = GetElement(this.id + '_Left', 28, 0, 9, this.height, this.themeURL + this.theme + '/left.png', 'repeat-y');
        e7 = GetElement(this.id + '_Content', 28, 9, this.width, this.height);
        e8 = GetElement(this.id + '_Right', 28, this.width + 9, 15, this.height, this.themeURL + this.theme + '/right.png', 'repeat-y');
        e9 = GetElement(this.id + '_BottomLeft', this.height + 28, 0, 15, 28, this.themeURL + this.theme + '/bottom-left.png');
        e10 = GetElement(this.id + '_BottomMiddle', this.height + 28, 9, this.width, 28, this.themeURL + this.theme + '/bottom-middle.png', 'repeat-x');
        e11 = GetElement(this.id + '_BottomRight', this.height + 28, this.width + 9, 15, 28, this.themeURL + this.theme + '/bottom-right.png');
        e12 = GetElement(this.id + '_Close', 10, this.width + 2, 15, 9);

        e1.style.width = '100%';
        e1.style.height = '1300px';
        e1.style.display = 'block';
        e1.style.backgroundColor = this.themeColour;
        e1.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';
        e1.style.opacity = '0.5';
        e1.style.zIndex = '9998';

        e2.style.backgroundColor = this.themeColour;
        e2.style.zIndex = '9999';

        e4.style.cursor = 'move';
        e4.style.fontFamily = 'Calibri,Verdana,Helvitica,Arial';
        e4.style.fontSize = 'medium';
        e4.style.fontWeight = 'bold';
        e4.style.color = '#000000';
        e4.style.textAlign = 'center';
        e4.style.paddingTop = '5px';
        e4.innerHTML = this.title;
        e4.onmousedown = StartDrag;

        e7.style.backgroundColor = this.themeColour;
        e7.innerHTML = this.content;

        e12.onmouseup = Hide;
        
        e2.appendChild(e3);
        e2.appendChild(e4);
        e2.appendChild(e5);
        e2.appendChild(e6);
        e2.appendChild(e7);
        e2.appendChild(e8);
        e2.appendChild(e9);
        e2.appendChild(e10);
        e2.appendChild(e11);
        e2.appendChild(e12);

        document.body.appendChild(e1);
        document.body.appendChild(e2);

        

    }
    
    function Hide() { document.body.removeChild(e2); document.body.removeChild(e1); }
    
    function StartDrag(e) {
        e = e || window.event;
        xStart = parseInt(e.clientX);
        yStart = parseInt(e.clientY);
        e2.style.top = parseInt(GetElementStyle(e2, 'top')) + 'px';
        e2.style.left = parseInt(GetElementStyle(e2, 'left')) + 'px';
        document.onmousemove = Drag;
        document.onmouseup = EndDrag;
        return false;
    }

    function Drag(e) {
        e = e || window.event;
        xDelta = xStart - parseInt(e.clientX);
        yDelta = yStart - parseInt(e.clientY);
        xStart = parseInt(e.clientX);
        yStart = parseInt(e.clientY);
        var x = parseInt(e2.style.left) - xDelta; if (x < 10) { x = 10 };
        var y = parseInt(e2.style.top) - yDelta; if (y < 10) { y = 10 };
        e2.style.top = y + 'px';
        e2.style.left = x + 'px';
    }

    function EndDrag() {
        document.onmouseup = null;
        document.onmousemove = null;
    }

    function GetElementStyle(e, style) {

        var styleValue = "";

        if (document.defaultView && document.defaultView.getComputedStyle) {
            var css = document.defaultView.getComputedStyle(e, null);
            styleValue = css ? css.getPropertyValue(style) : null;
        }

        else if (e.currentStyle) {
            style = style.replace(/\-(\w)/g, function(strMatch, p1) {
                return p1.toUpperCase();
            });
            styleValue = e.currentStyle[style];
        }

        return styleValue;
    }

}

function SampleUse(){
    
    myBox = new AutoPlay_PopUp();
    myBox.top = 5;
    myBox.width = 500;
    myBox.height = 420;
    myBox.title = 'This is a sample popup box';
    myBox.content = '<iframe src="http://www.yourcontent.com/page.aspx?q=querystring" frameborder="0" marginwidth="0" style="height: 100%; width: 100%; top: 0px; left: 0px;" scrolling="no"></iframe>';    
    myBox.Show();
    
}