// flyoutType can be two values
//  appear: the flyout just appears and then disappears
//  flyout: the flyout actually flys out
var flyoutType = "appear";

var useOverlay = true;

// the current status of the animation
var status = "stopped";

// how fast the animation moves
var horizontalMoveIncrement = 5;

// the javascript object of the div
var divObjectToMove;

// the divs current sides
var currentDivLeft;

// the values of the window, saved in variables to abstract the differences in browsers
var windowHeight;
var windowWidth;
var windowTop;

var leftOffset;
var topOffset;

// where the div should fly to
var endHPosition;
var endVPosition;

// this is the div with the content to fly out
var divTopyCopyFrom;

function getParent(div){
    if( navigator.userAgent.indexOf( 'Gecko' ) != -1 || navigator.userAgent.indexOf( 'Opera' ) != -1) {
        //alert("Non-IE");
        return div.parentNode;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //alert("IE 6+ in 'standards compliant mode'");
        return div.offsetParent;
    }
    return null;
}

function getLeftOffset(){
    leftOffset = 0;
    divParent = getParent(divObjectToMove);
    
    while(divParent != undefined && divParent != ""){
        if(parseInt(divParent.offsetLeft) && divParent.id != ""){ // HACK
            leftOffset = leftOffset + parseInt(divParent.offsetLeft);
        }
        divParent = getParent(divParent);
    }
    return leftOffset;
}

function getTopOffset(){
    topOffset = 0;
    divParent = getParent(divObjectToMove);
    
    while(divParent != undefined && divParent != ""){
        if(parseInt(divParent.offsetTop) && divParent.id != ""){ // HACK
            topOffset = topOffset + parseInt(divParent.offsetTop);
        }
        divParent = getParent(divParent);
    }
    return topOffset;
}

// calculates the different dimensions from different properties based on the type of browser
function calculateDimensions(){    
    leftOffset = getLeftOffset(); 
    topOffset = getTopOffset(); 
    if (self.innerWidth) // all except Explorer
	{
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
		windowTop = 0; //window.pageYOffset;
		documentHeight = windowHeight;
	}
	else if(document.documentElement && typeof document.documentElement.style.maxHeight!="undefined")
	{ // IE 7
		windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
        windowTop = document.body.scrollTop;
		documentHeight = window.screen.height;
	}
	else if (document.compatMode && document.all) // Explorer 6 Strict Mode
	{
		windowWidth = document.documentElement.clientWidth;
        windowHeight = document.documentElement.clientHeight;
		windowTop = document.documentElement.scrollTop;
		documentHeight = window.screen.height + 79;
		documentHeight = document.body.parentNode.scrollHeight;
	}
	else if (document.body) // other Explorers
	{
		windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
        windowTop = document.body.scrollTop;
		documentHeight = window.screen.height;
	}
}

// function called to init the process
// this function MUST be called and passed the id of the div to flyout
// if there is currently a div onscreen that this set of functions flew out
// then that div will be hidden before the new div fly out starts
function initDiv(idOfDiv, typeOfFlyout){
    flyoutType = typeOfFlyout;
    divObjectToMove = $("flyoutContent");
    divTopyCopyFrom = $(idOfDiv);
    
    // this is where the contents of div are copied into the page flyout
	var tempFlyoutContent = divTopyCopyFrom.innerHTML;
	divTopyCopyFrom.innerHTML = '';
	divObjectToMove.innerHTML = tempFlyoutContent;
    
    // copy the styles here
    divObjectToMove.style.height = divTopyCopyFrom.style.height;
    divObjectToMove.style.width = divTopyCopyFrom.style.width;
    
    calculateDimensions();
    // if the current divObjectToMove is visble move it offscreen
    if(divObjectToMove.style.display == 'none'){
        currentDivLeft =  0 - (parseInt(divObjectToMove.offsetWidth) + 10);
        divObjectToMove.style.left = currentDivLeft + "px";
    }
    
    endHPosition = (windowWidth/2) - (parseInt(divObjectToMove.style.width)/2);
}

// starts the div flying on screen
function startFlyingOnScreen(){
    currentDivLeft = -1000;
    status = "flyingOnScreen";
    window.setTimeout("animateFlyout();",10);
    
    divObjectToMove.style.display = "block";
    divObjectToMove.style.left = currentDivLeft + "px";
    
    // get the height at this point instead of on init because then we are sure it has been calculated
    endVPosition = windowTop + (windowHeight - divObjectToMove.offsetHeight)/2;
    if(endVPosition < 0){
        endVPosition = 0;
    }
    divObjectToMove.style.top = endVPosition + "px";

    if(useOverlay == true){
        $("flyoutOverlay").style.display = "block";
        
        windowWidth = "100%";
        //windowHeight = window.screen.height + "px";
        // make overlay the size of the screen
        $("flyoutOverlay").width = windowWidth;
        $("flyoutOverlay").style.height = documentHeight;
    }
}

// starts the div flying off screen
function startFlyingOffScreen(){
    // 
	divTopyCopyFrom.innerHTML = divObjectToMove.innerHTML;
	
    status = "flyingOffScreen";
    window.setTimeout("animateFlyout();",10);
        
    if(useOverlay == true){
        $("flyoutOverlay").style.display = "none";
		$("flyoutOverlay").style.zIndex = "1";
    }
}

// does the flying of the div
function animateFlyout(){
    var hMoveIncrement = horizontalMoveIncrement;
    switch(status){
        case "flyingOnScreen":
            if(currentDivLeft >  endHPosition){
                status = "stopped";
            }
            break;
        case "flyingOffScreen":
            if(flyoutType == "appear"){
                endHPosition =  -1000;
            }else{
                hMoveIncrement *= -1;
            }
            break;
    }
    if(flyoutType == "appear"){
        currentDivLeft = endHPosition;
        if(status == "flyingOffScreen"){
            stopAnimation();
         }
    }else{
        currentDivLeft = parseInt(currentDivLeft) + hMoveIncrement;
        if(status != "stopped"){
            window.setTimeout("animateFlyout();",10);
        }
    }
    divObjectToMove.style.left = currentDivLeft + "px";
    if(parseInt(divObjectToMove.offsetLeft) < -100 - divObjectToMove.offsetWidth && status == "flyingOffScreen"){
        stopAnimation();
    }
}

// hides the div
// should be called when the div is finished animating and is off screen
function stopAnimation(){
    divObjectToMove.style.display = "none";
    status = "stopped";
}

// Base function which gets the elements of passed in code.
function $() {
	var elements = new Array();
	for (var i = 0; i < arguments.length; i++) {
		var element = arguments[i];
		if (typeof element == 'string')
			element = document.getElementById(element);
		if (arguments.length == 1)
			return element;
		elements.push(element);
	}
	return elements;
}