var numberOfSteps = 40;

var nthModalWindowOpened = 0;

var modalWindowLoop = new Array();
var nthModalWindowOpenedObject = new Array();
var intervalModalWindow = 0;
var startTop = new Array();
var startLeft = new Array();
var targetTop = new Array();
var targetLeft = new Array();
var targetWidth = new Array();
var targetHeight = new Array();
var stepsTop = new Array();
var stepsLeft = new Array();
var stepWidth = new Array();
var stepHeight = new Array();

function closeSkellosModalWindow(nth){
    var body = document.getElementsByTagName('body')[0];
    var fade = document.getElementById('ObjFadeWindow');
    body.removeChild(fade);
    body.style.overflow = '';
    
    body.removeChild(nthModalWindowOpenedObject[nth]);
}

function openSkellosModalWindow(myThis, myTextInBox){
    
    nthModalWindowOpened = nthModalWindowOpened + 1;
    
    var divId = 'modalWindowOpened_' + nthModalWindowOpened;

    // First, we find our BODY tag and append the new Modal Window DIV under it
    myItem = findSpecificTagItemInDOM("BODY", 1);
    newInput = document.createElement('div');
    newInput.className = 'skellos_modal_window';
    newInput.setAttribute('id', divId);
    newInput.style.display = 'none';
    newInput.style.position = 'absolute';
    newInput.style.zIndex = "2000";
    myItem.appendChild(newInput);
    
    
    // Now let's animate this item
    // Our variables are declared
    var myItem = document.getElementById(divId);
    var myPosition = findPos(myThis); // return {x:curleft, y:curtop};
    
    // Get the position of the calling object
    myItem.style.top = myPosition.y;
    myItem.style.left = myPosition.x;
    
    // Find the width and height total of our actual window
    var windowSize = getWindowSize(); // return {width:myWidth, height:myHeight};
    var myScrollOffset = getScrollOffset(); // return {x:scrOfX, y:scrOfY, left:scrOfX, top:scrOfY};
    
    // Define the width and height of our modal window at 50%
    var modalWindoWidth = Math.floor(windowSize.width / 2);
    var modalWindoHeight = Math.floor(windowSize.height / 2);
    
    // Start with width and height 2px then we will grow to it's maximum while moving to the center of screen
    myItem.style.width = 2;
    myItem.style.height = 2;
    
    // Now lets start our animation from our element's position
    startTop[nthModalWindowOpened] = myPosition.y;
    startLeft[nthModalWindowOpened] = myPosition.x;
    targetTop[nthModalWindowOpened] = myScrollOffset.top + Math.floor(modalWindoHeight / 2);
    targetLeft[nthModalWindowOpened] = myScrollOffset.left + Math.floor(modalWindoWidth / 2);
    targetWidth[nthModalWindowOpened] = modalWindoWidth;
    targetHeight[nthModalWindowOpened] = modalWindoHeight;
    
    if(myPosition.y <= targetTop[nthModalWindowOpened]) stepsTop[nthModalWindowOpened] = (targetTop[nthModalWindowOpened] - startTop[nthModalWindowOpened]) / (numberOfSteps / 2);
    else stepsTop[nthModalWindowOpened] = 0 - (targetTop[nthModalWindowOpened] - startTop[nthModalWindowOpened]) / (numberOfSteps / 2);
    
    if(myPosition.x <= targetLeft[nthModalWindowOpened]) stepsLeft[nthModalWindowOpened] = (targetLeft[nthModalWindowOpened] - startLeft[nthModalWindowOpened]) / (numberOfSteps / 2);
    else stepsLeft[nthModalWindowOpened] = 0 - (targetLeft[nthModalWindowOpened] - startLeft[nthModalWindowOpened]) / (numberOfSteps / 2);
    
    stepWidth[nthModalWindowOpened] = (modalWindoWidth - 2) / numberOfSteps;
    stepHeight[nthModalWindowOpened] = (modalWindoHeight - 2) / numberOfSteps;
    
    myItem.style.display = '';
    
    nthModalWindowOpenedObject[nthModalWindowOpened] = myItem;
    
    // Make everything other then our modal window to grey and unclickable
    setFadeWindow();
    
    intervalModalWindow = setInterval('animateElementModalWindow(nthModalWindowOpened)', 1);

    // Lets make sure we have a closing option to our window
    var myNewWindow = document.getElementById(divId);
    newInput = document.createElement('div');
    newInput.className = 'skellos_modal_window_closer';
    newInput.setAttribute('id', 'closer_' + divId);
    newInput.style.width = '100%';
    newInput.style.marginLeft = '-17';
    newInput.style.marginTop = '-17';
    newInput.style.position = 'absolute';
    newInput.style.textAlign = 'left';
    newInput.style.zIndex = "9";
    newInput.innerHTML = '<a href="#" onClick="closeSkellosModalWindow(' + nthModalWindowOpened + '); return false;" style="color:black; text-decoration: none; font-size: 12px;">[X]</a>';
    myNewWindow.appendChild(newInput);

    // Lets make sure we have a closing option to our window
    var myNewWindow = document.getElementById(divId);
    newInput = document.createElement('div');
    newInput.className = 'skellos_modal_window_content';
    newInput.setAttribute('id', 'content_' + divId);
    newInput.style.width = '100%';
    newInput.style.position = 'absolute';
    newInput.style.zIndex = "2";
    
    // Now we put the TEXT or CONTENT in our new window box.
    // If myTextInBox is an array, this means we have to find some other content.
    // Else it is simple text to put in the box.
    if(myTextInBox["type"] == "text"){
        newInput.innerHTML = myTextInBox["text"];
        myNewWindow.appendChild(newInput);
    }
    else if(myTextInBox["type"] == "ajax"){
        newInput.innerHTML = '';
        myNewWindow.appendChild(newInput);
        
        setTimeout('ajax.replace("' + myTextInBox["filename"] + '", "content_' + divId + '", "post", "' + myTextInBox["parameters"] + '")', 5000);
    }
    
}

function setFadeWindow() {
    var body = document.getElementsByTagName('body')[0];
    var fade = createFadeWindow();

    var scroll=getScrollOffset();
    
    fade.style.top = scroll.top+"px";
    fade.style.left = scroll.left+"px";
    
    body.appendChild(fade);
    body.style.overflow = 'hidden';
}

function createFadeWindow()    {
    var fade = document.getElementById('ObjFadeWindow');
    if(fade != null && typeof(fade) == 'object') return fade;

    fade = document.createElement("div");
    fade.id = "ObjFadeWindow";

    fade.style.position = "absolute";
    fade.style.top = "0px";
    fade.style.left = "0px";
    fade.style.width = "100%";
    fade.style.height = "100%";
    fade.style.backgroundColor = "#b3b3b3";
    fade.style.backgroundColor = "#000";
    fade.style.cursor = "not-allowed";
    fade.style.filter = "Alpha(Opacity=50)";
    fade.style.opacity = "0.50";
    fade.style.zIndex = "99";

    return fade;
}

function findSpecificTagItemInDOM(getWhat, nthOccurence){
    var children = document.getElementsByTagName('*');
    var nthFound = 1;
    for(var i=0; i<children.length; i++){
        myType = children[i].tagName;
        if(myType == getWhat){
            if(nthFound == nthOccurence){
                return children[i];
            }
            nthFound = nthFound + 1;
        }
    }
}

function animateElementModalWindow(nth){
    var myItem = nthModalWindowOpenedObject[nth];
    var divId = 'modalWindowOpened_' + nth;
    
    if(document.getElementById(divId)){
        var myPosition = findPos(myItem); // return {x:curleft, y:curtop};

        var stopTop = 0;
        if(startTop[nth] <= targetTop[nth] && myPosition.y <= targetTop[nth]) document.getElementById(divId).style.top = myPosition.y + stepsTop[nth];
        else if(startTop[nth] > targetTop[nth] && myPosition.y > targetTop[nth]) document.getElementById(divId).style.top = myPosition.y - stepsTop[nth];
        else if( ( startTop[nth] <= targetTop[nth] && myPosition.y > targetTop[nth] ) || ( startTop[nth] > targetTop[nth] && myPosition.y <= targetTop[nth] ) ) stopTop = 1;
        
        var stopLeft = 0;
        if(startLeft[nth] <= targetLeft[nth] && myPosition.x <= targetLeft[nth]) document.getElementById(divId).style.left = myPosition.x + stepsLeft[nth];
        else if(startLeft[nth] > targetLeft[nth] && myPosition.x > targetLeft[nth]) document.getElementById(divId).style.left = myPosition.x - stepsLeft[nth];
        else if( ( startLeft[nth] <= targetLeft[nth] && myPosition.x > targetLeft[nth] ) || ( startLeft[nth] > targetLeft[nth] && myPosition.x <= targetLeft[nth] ) ) stopLeft = 1;
        
        var mySize = getElementSize(divId); // return {width:myWidth, height:myHeight};
        
        var stopWidth = 0;
        if(mySize.width <= targetWidth[nth]){
            var newWidth = mySize.width + parseInt(stepWidth[nth]);
            document.getElementById(divId).style.width = newWidth + 'px';
        }
        else stopWidth == 1;
        
        var stopHeight = 0;
        if(mySize.height <= targetHeight[nth]){
            var newHeight = mySize.width + parseInt(stepHeight[nth]);
            document.getElementById(divId).style.height = newHeight + 'px';
        }
        else stopHeight == 1;
        
        if(stopTop == 1 && stopLeft == 1 && stopWidth == 1 && stopHeight == 1){
            clearInterval(intervalModalWindow);
            intervalModalWindow = 0;
        }
    }
}