var SHOWDELAYTIMER = 500;
var OFFSET = 0;
var ZINT = 100;

//The Flyout trigger has been moused over
function FlyOut(id, direction, callback) {

    //Get the elements
    var flyOutTrigger = document.getElementById(id + '-FlyOutTrigger');
    var flyOutContent = document.getElementById(id + '-FlyOutContent');

    //Make sure the c.Timer is clear
    clearTimeout(flyOutContent.timer);

    //Show the Flyout
    if (direction == 1) {
        
        //Set a timeout so that the flyout is not displayed when the mouse is moved over a flyout trigger quickly
        flyOutContent.timer = setTimeout(function() { Show(id, flyOutContent, flyOutTrigger, callback); }, SHOWDELAYTIMER);

    } else {
 
        //Clear the show timer in case the flyout has not been shown yet
        clearTimeout(flyOutContent.timer);
        
        //Hide the flyout
        Hide(flyOutContent, callback);
    }
}

//Position the Flyout
function PositionFlyout(id) {

    var positionValues = new Array();

    //Get the first, last and current elements
    var flyOutTriggerFirstElement = jQuery("div[id$='-FlyOutContainer']:first");
    var flyOutTriggerLastElement = jQuery("div[id$='-FlyOutContainer']:last");
    var flyOutTriggerCurrentElement = jQuery("#" + id + "-FlyOutContainer");

    //Get the position of all these elements
    var positionFirstElement = flyOutTriggerFirstElement.offset();
    var positionLastElement = flyOutTriggerLastElement.offset();
    var positionCurrentElement = flyOutTriggerCurrentElement.offset();

    if (positionCurrentElement.top == positionFirstElement.top) {
        
        //Element we moused over was the first trigger
        positionValues[0] = "top";
        positionValues[1] ="-20px";

        return positionValues;

    } else if ((positionCurrentElement.top + flyOutTriggerCurrentElement.height()) == (positionLastElement.top + flyOutTriggerLastElement.height())) {
       
        //Element we moused over was the last trigger
        positionValues[0] = "bottom";
        positionValues[1] = "-20px";

        return positionValues;
        
    } else {
        //Element we moused over was in the middle
        
        //Get the total distance between the first and last element
        var elementTotalDistance = (positionLastElement.top + flyOutTriggerLastElement.height()) - (positionFirstElement.top);

        //Check if the current element is closer to the or bottom
        if (positionCurrentElement.top > (positionFirstElement.top + (elementTotalDistance / 2))) {
        
            positionValues[0] = "bottom";
            positionValues[1] = "-20px";  //((positionLastElement.top + flyOutTriggerLastElement.height()) - positionCurrentElement.top) + "px";

        } else {
        
            positionValues[0] = "top";
            positionValues[1] = "-20px";  //(positionCurrentElement.top - positionFirstElement.top) + "px";
            
        }

        return positionValues;
        
    }
    
}

//Show the Flyout
function Show(id,flyOutContent, flyOutTrigger, callback) {

    //Clear show timer
    clearTimeout(flyOutContent.timer);
    
    ZINT = ZINT + 1;

    flyOutContent.style.display = 'block';
    flyOutContent.style.filter = 'alpha(opacity=100)';
    flyOutContent.style.opacity = 1;
    flyOutContent.style.left = (flyOutTrigger.offsetWidth + OFFSET) + 'px';

    //Get the positioning
    var positionValues = PositionFlyout(id);

    //Set the positioning
    if (positionValues[0] == "top") {
        flyOutContent.style.top = positionValues[1];
    } else {
        flyOutContent.style.bottom = positionValues[1];
    }
    
    flyOutContent.style.zIndex = ZINT;

    //Call the callback function once flyout is displayed
    if (callback != undefined) {
        eval(callback);
    }
}

//Hide the Flyout
function Hide(flyOutContent, callback) {
    //Clear show timer
    clearTimeout(flyOutContent.timer);

    flyOutContent.style.opacity = 0;
    flyOutContent.style.filter = 'alpha(opacity=0)';
    flyOutContent.style.display = 'none';

    //Call the callback function once flyout is gone
    if (callback != undefined) {
        eval(callback);
    }
}