var SLIDEDURATION = 1000;
var THEBOXWIDTH = 768;
var INTROBOXWIDTH = 913;
var INTROBOXHEIGHT = 309;
var introOn = true;

function slideIntroOut() {
    introOn = false;
    var wait = setInterval(function() {
        if( !$("#thebox, #introbox").is(":animated") ) {
            clearInterval(wait);
            var finalBoxPos = getWidth() - THEBOXWIDTH;
            $("#thebox").show();
            $("#introbox").animate({left:"-3000px"},SLIDEDURATION);
            $("#thebox").animate({left:finalBoxPos + "px"},SLIDEDURATION, function() {
                $("#introbox").hide();
            });
        }
    }, 1000);
}

function slideIntroIn() {
    introOn = true;
    var wait2 = setInterval(function() {
        if( !$("#thebox, #introbox").is(":animated") ) {
            clearInterval(wait2);
            var centerLeft = (getWidth()/2) - (INTROBOXWIDTH/2);
            var centerTop = (getHeight()/2) - (INTROBOXHEIGHT/2);
            $("#introbox").show();
            $("#introbox").css("top",centerTop + "px");
            $("#introbox").animate({left:(centerLeft + "px")},SLIDEDURATION);
            $("#thebox").animate({left:"3000px"},SLIDEDURATION, function() {
                $("#thebox").hide();
            });
        }
    }, 1000);
}

function centerIntro() {
    var centerLeft = (getWidth()/2) - (INTROBOXWIDTH/2);
    var centerTop = (getHeight()/2) - (INTROBOXHEIGHT/2);
    $("#introbox").css("left",centerLeft + "px");
    $("#introbox").css("top",centerTop + "px");
    $("#introbox").click(slideIntroOut);
}

function positionTheBox() {
    var finalBoxPos = getWidth() - THEBOXWIDTH;
    $("#thebox").css("left",finalBoxPos);
}

function getWidth() {
    var winW = 630, winH = 460;
    if (document.body && document.body.offsetWidth) {
        winW = document.body.offsetWidth;
    }
    if (document.compatMode=='CSS1Compat' &&
        document.documentElement &&
        document.documentElement.offsetWidth ) {
        winW = document.documentElement.offsetWidth;
    }
    if (window.innerWidth && window.innerHeight) {
        winW = window.innerWidth;
    }
    return winW;
}

function getHeight() {
    var winW = 630, winH = 460;
    if (document.body && document.body.offsetWidth) {
        winH = document.body.offsetHeight;
    }
    if (document.compatMode=='CSS1Compat' &&
        document.documentElement &&
        document.documentElement.offsetWidth ) {
        winH = document.documentElement.offsetHeight;
    }
    if (window.innerWidth && window.innerHeight) {
        winH = window.innerHeight;
    }
    return winH;
}

function getScrollBarWidth () {  
    var inner = document.createElement('p');  
    inner.style.width = "100%";  
    inner.style.height = "200px";  
  
    var outer = document.createElement('div');  
    outer.style.position = "absolute";  
    outer.style.top = "0px";  
    outer.style.left = "0px";  
    outer.style.visibility = "hidden";  
    outer.style.width = "200px";  
    outer.style.height = "150px";  
    outer.style.overflow = "hidden";  
    outer.appendChild (inner);  
  
    document.body.appendChild (outer);  
    var w1 = inner.offsetWidth;  
    outer.style.overflow = 'scroll';  
    var w2 = inner.offsetWidth;  
    if (w1 == w2) w2 = outer.clientWidth;  
  
    document.body.removeChild (outer);  
  
    return (w1 - w2);  
}

function resized() {
    if(introOn) {
        centerIntro();
    } else {
        positionTheBox()
    }
}