var CurrentClientID;
var resizeToWidth;
var resizeToHeight;
var transDuration = 500;
var currentPopup;
var currentContainer;


function PopupPosition(clientID) {
    var popupObject = $(clientID);

    this.y = 0;
    this.x = 0;
}



function SetupCSSOverlay() {

    if ($('CssOverlay') == null) {
        var popupContainer = $('popupContent');
        var cssOverlay = new Element('div', { 'class': 'CssOverlay', 'id': 'CssOverlay', 'style': 'display:none;position:absolute;background:#333333;zindex:400;' });
        cssOverlay.innerHTML = " ";
        cssOverlay.injectTop(popupContainer);             
    }

    try {
        var overlay = $('CssOverlay');
        var position = new PopupPosition('CssOverlay');

        overlay.style.top = position.y + 'px';
        overlay.style.left = position.x + 'px';

        overlay.style.width = document.getCoordinates().width + 'px';
        overlay.style.height = document.getCoordinates().height + 'px';       
    }
    catch (e) {
        alert('Setup CSS Overlay - 2 - ' + e.message);
    }
    
}


function SetupPopupPosition(ClientID, finalWidth) {
    var item = $(ClientID + "_Container");
    var position = new PopupPosition(ClientID + "_Container");

    item.style.top = (position.y + 25) + 'px';
    item.style.left = (position.x + (((document.getCoordinates().width) / 2) - (finalWidth / 2))) + 'px';
}

window.onscroll = function() {
    if (CurrentClientID && CurrentClientID.length > 0) {
        currentPopup.fireEvent('movePopup');
    }
}


window.onresize = function() {
    if (CurrentClientID != null) {
        if (CurrentClientID.length > 0) {
            currentPopup.fireEvent('movePopup');
        }
    }
}

function SetupPopup(ClientID) {
    SetupCSSOverlay();
    $(ClientID).addEvents({
        'fadeOut': function() {
            /* currentPopup.set('morph', { duration: transDuration
            , transition: Fx.Transitions.Expo.easeOut
            , link: 'chain'
            });

            currentPopup.morph({ 'opacity': [1, 0] }); */
        },

        'hide': function() {
            currentPopup.fireEvent('fadeOut');
            currentPopup.fireEvent('resizeOut');
            currentPopup.fireEvent('hideContainer', '', (transDuration));
        },

        'fadeIn': function() {
            currentPopup.style.display = "block";

            /*currentPopup.set('morph', { duration: transDuration
            , transition: Fx.Transitions.Expo.easeOut
            , link: 'chain'
            });

            currentPopup.morph({ 'opacity': [0, 1] }); */
        },

        'resizeIn': function() {
            currentContainer.style.display = "block";

            currentContainer.set('morph', { duration: transDuration
                , transition: Fx.Transitions.Expo.easeOut
                , link: 'chain'
            });

            currentContainer.morph({ 'width': [75, resizeToWidth], 'height': [75, resizeToHeight] });
        },

        'resizeOut': function() {

            currentContainer.set('morph', { duration: transDuration
                , transition: Fx.Transitions.Expo.easeOut
                , link: 'chain'
            });

            currentContainer.morph({ 'width': [resizeToWidth, 0], 'height': [resizeToHeight, 0] });
        },

        'show': function() {
            currentPopup.fireEvent('hideContainer');
            currentPopup.fireEvent('resizeIn');
            currentPopup.fireEvent('fadeIn', '', transDuration);
            $('CssOverlay').style.display = "block";
            $("CssOverlay").setStyles({ 'opacity': 0.6 });

        },

        'hideContainer': function() {
            currentContainer.style.display = "none";
            $("CssOverlay").style.display = "none";
        },

        'hideContent': function() {
            currentPopup.style.display = "none";
        },

        'movePopup': function() {
            SetupCSSOverlay();
            var position = new PopupPosition(this.id + '_Container');

            currentContainer.set('morph', { duration: transDuration
                    , transition: Fx.Transitions.Expo.easeOut
                    , link: 'chain'
            });

            currentContainer.morph({ 'top': [position.y + 25], 'left': [position.x + (((document.getCoordinates().width) / 2) - (resizeToWidth / 2))] });
        },

        'adjustHeight': function(newHeight) {
            currentContainer.set('morph', { duration: transDuration
                        , transition: Fx.Transitions.Expo.easeOut
                        , link: 'chain'
            });
            currentContainer.morph({ 'height': [newHeight] });
        }
    });   
}

function ShowPopup(ClientID, width, height) {

    CurrentClientID = ClientID;
    
    resizeToWidth = width;
    resizeToHeight = height;

    currentPopup = $(CurrentClientID);
    currentContainer = $(CurrentClientID + '_Container');    

    SetupCSSOverlay();
    SetupPopupPosition(ClientID, width);
    currentPopup.fireEvent('show');
}


function AdjustPopupHeight(newHeight, addToCurrentHeight) {

    if (addToCurrentHeight) {
        var coords = currentContainer.getCoordinates();            
        currentPopup.fireEvent('adjustHeight', newHeight + resizeToHeight);
    }
    else {
        currentPopup.fireEvent('adjustHeight', newHeight);
    }   
}

function HidePopupPostback(sender, arguments) {
    if (arguments.EventTarget.indexOf('cmdSave') >= 0) {
        currentPopup.fireEvent('hide');
        CurrentClientID = "";
    }
}


function HidePopup() {
    currentPopup.fireEvent('hide');
    CurrentClientID = "";   
}