Type.registerNamespace('Fansite.ModalButton');

// -------------------------------------- interface

Fansite.ModalButton.initModalButton = function (modalButtonID, modalProxyPath, modalWidth, modalHeight, restrictedUrl, showModalOnLoad)
{
    var oModalButton = $get(modalButtonID);
    if(typeof(oModalButton) != 'undefined' && oModalButton != null) 
    {
        Fansite.ModalButton.initModalObjects(oModalButton);
        $addHandler(oModalButton, 'click', Function.createCallback(Fansite.ModalButton.showModal, { modalButton : oModalButton, modalProxyPath : modalProxyPath, modalWidth : modalWidth, modalHeight : modalHeight, restrictedUrl : restrictedUrl }));
    }
    if(showModalOnLoad == true)
    {
        Fansite.ModalButton.doShowModal(modalWidth, modalHeight, modalProxyPath);
    }
}

Fansite.ModalButton.showModal = function (evt, context) 
{
    if(String(context.restrictedUrl).length > 0)
    {
        // restricted page (prob requires a logged in user) - go there
        window.location.href = context.restrictedUrl;
    }
    else
    {
        Fansite.ModalButton.doShowModal(context.modalWidth, context.modalHeight, context.modalProxyPath);
    }
    return Relational.Utility.eventCancel(evt);
}

// NOTE: this function must be called with valid style strings for width & height or else resize won't work properly in FireFox 
//  (for example = 100%, 200px, etc) 
Fansite.ModalButton.doShowModal = function (modalWidth, modalHeight, modalProxyPath) 
{
    // show the modal mask
    var oMask = $get('ModalButtonMask');
    Relational.Utility.changeClassName(oMask, 'Hidden', 'Visible');
    // move the mask to the bottom of the dom
    //document.body.appendChild(oMask);
    // show the modal itself
    var oModalTarget = $get('ModalButtonTarget');
    oModalTarget.style.width = modalWidth;
    oModalTarget.style.height = modalHeight;
    Relational.Utility.changeClassName(oModalTarget, 'Hidden', 'Visible');
    Fansite.ModalButton.centerModal(oModalTarget, null);
    // move the mask to the bottom of the dom
    //document.body.appendChild(oModalTarget);
    // set the src of the iframe to the proxy page    
    var targetIframe = $get('ModalButtonIframe');
    targetIframe.src = modalProxyPath;
}

Fansite.ModalButton.hideModalFromIframe = function (evt, context)
{
    //debugger;
    // hide the modal and mask
    var oMask = $get('ModalButtonMask', parent.document);
    Relational.Utility.changeClassName(oMask, 'Visible', 'Hidden');
    var oModal = $get('ModalButtonTarget', parent.document);
    Relational.Utility.changeClassName(oModal, 'Visible', 'Hidden');
    // reset the iframe's wait image
    var targetIframe = $get('ModalButtonIframe', parent.document);
    // TODO reset iframe's UI
    //Fansite.ModalButton.resetIframeUI(targetIframe);
    return Relational.Utility.eventCancel(evt);
}

Fansite.ModalButton.parentRedirect = function (url) 
{
    parent.window.location.href = url;
}

Fansite.ModalButton.forceParentRefresh = function () 
{
    parent.window.location.href = parent.window.location.href;
}

// NOTE: this function must be called with valid style strings for width & height or else resize won't work properly in FireFox 
//  (for example = 100%, 200px, etc) 
Fansite.ModalButton.setModalSizeFromIframe = function (width,height) 
{
    // set new height/width
    var oModalTarget = $get('ModalButtonTarget', parent.document);
    oModalTarget.style.width = width;
    oModalTarget.style.height = height;
    // recenter
    Fansite.ModalButton.centerModal(oModalTarget, parent);
}

// -------------------------------------- helper functions

Fansite.ModalButton.initModalObjects = function (oModalButton) 
{
    var oMask = $get('ModalButtonMask');
    if(typeof(oMask) == 'undefined' || oMask == null) 
    {
        // create the modal button mask
        oMask = document.createElement('div');
        oMask.id = 'ModalButtonMask';
        Sys.UI.DomElement.addCssClass(oMask, "Hidden");
        oModalButton.parentNode.insertBefore(oMask,oModalButton); 
        //NOTE: it would be nice to just append the modal mask at the bottom of the dom here (see code below) 
        //   but if we do that we end up with the "operation aborted" error in IE7 so we add it to our parent and move 
        //   it in the click event
        //document.body.appendChild(oMask);
    }
    var oModalTarget = $get('ModalButtonTarget');
    if(typeof(oModalTarget) == 'undefined' || oModalTarget == null) 
    {
        // create the modal wrapper
        oModalTarget = document.createElement('div');
        oModalTarget.id = 'ModalButtonWrapper';
        Sys.UI.DomElement.addCssClass(oModalTarget, "ModalContainer");
        Sys.UI.DomElement.addCssClass(oModalTarget, "Hidden");
        oModalButton.parentNode.insertBefore(oModalTarget,oModalButton); 
    }
    var oModalIframe = $get('ModalButtonIframe', oModalTarget);
    if(typeof(oModalIframe) == 'undefined' || oModalIframe == null) 
    {
        // TODO debug this code
        oModalIframe = document.createElement('iframe');
        oModalIframe.id = 'ModalIframe';
        oModalIframe.setAttribute('frameborder', '0');
        oModalIframe.setAttribute('allowtransparency', 'true');
        oModalIframe.style.width = '100%';
        oModalIframe.style.height = '100%';
        oModalButton.appendChild(oModalIframe);
    }
    // init the iframe's wait spinner
    //Fansite.ModalButton.resetIframeUI(oModalIframe);
}

//Fansite.ModalButton.resetIframeUI = function(oModalIframe) {
//    oModalIframe.src = "../Proxy/PleaseWait.aspx";
//    // Can't always reliably write to iframe's contents (i assume because the iframe's body/document/etc isn't always initialized when the parent page is executing js?
//    //oModalIframe.contentWindow.document.write("<img src='../images/componentart/spinner.gif'>");
//    //if (oModalIframe.contentWindow.document.body != null) oModalIframe.contentWindow.document.body.innerHTML = "<img src='../images/componentart/spinner.gif'>";
//}

/////////// centering code
// Code below taken from - http://www.evolt.org/article/document_body_doctype_switching_and_more/17/30655/ *
// Gets the full width/height because it's different for most browsers.
Fansite.ModalButton.getViewportWidth = function(oParent) {
    if(typeof(oParent) != 'undefined' && oParent != null) {
        if (oParent.window.innerWidth != oParent.window.undefined) return oParent.window.innerWidth; 
        if (oParent.document.compatMode=='CSS1Compat') return oParent.document.documentElement.clientWidth; 
        if (oParent.document.body) return oParent.document.body.clientWidth; 
        return oParent.window.undefined; 
    }
    else {
        if (window.innerWidth!=window.undefined) return window.innerWidth; 
        if (document.compatMode=='CSS1Compat') return document.documentElement.clientWidth; 
        if (document.body) return document.body.clientWidth; 
        return window.undefined; 
    }
}

Fansite.ModalButton.getViewportHeight = function(oParent) {
    if(typeof(oParent) != 'undefined' && oParent != null) {
        if (oParent.window.innerHeight != oParent.window.undefined) return oParent.window.innerHeight;
        if (oParent.document.compatMode=='CSS1Compat') return oParent.document.documentElement.clientHeight;
        if (oParent.document.body) return oParent.document.body.clientHeight; 
        return oParent.window.undefined; 
    }
    else {
        if (window.innerHeight!=window.undefined) return window.innerHeight;
        if (document.compatMode=='CSS1Compat') return document.documentElement.clientHeight;
        if (document.body) return document.body.clientHeight; 
        return window.undefined; 
    }
}

Fansite.ModalButton.centerModal = function (oModalTarget, oParent) 
{
    var gi = 0;
    var width = oModalTarget.offsetWidth;
    var height = oModalTarget.offsetHeight;
    var fullWidth = Fansite.ModalButton.getViewportWidth(oParent);
    var fullHeight = Fansite.ModalButton.getViewportHeight(oParent);
    var scLeft,scTop;
    if(typeof(oParent) != 'undefined' && oParent != null) {
        // use the parent object
        if (oParent.window.pageYOffset) {
            scLeft = oParent.window.pageXOffset;
            scTop = oParent.window.pageYOffset;
        } else if (oParent.document.documentElement && oParent.document.documentElement.scrollTop) {
            scLeft = oParent.document.documentElement.scrollLeft;
            scTop = oParent.document.documentElement.scrollTop;
        } else if (oParent.document.body) {
            scLeft = oParent.document.body.scrollLeft;
            scTop = oParent.document.body.scrollTop;
        } 
    }
    else {
        // no parent passed in
        if (self.pageYOffset) {
            scLeft = self.pageXOffset;
            scTop = self.pageYOffset;
        } else if (document.documentElement && document.documentElement.scrollTop) {
            scLeft = document.documentElement.scrollLeft;
            scTop = document.documentElement.scrollTop;
        } else if (document.body) {
            scLeft = document.body.scrollLeft;
            scTop = document.body.scrollTop;
        } 
    }
    var topMargin = scTop + ((fullHeight - height) / 2);
    if (topMargin < 0) { topMargin = 0; }
    oModalTarget.style.top = topMargin + "px";
    oModalTarget.style.left =  (scLeft + ((fullWidth - width) / 2)) + "px";
}