/**************************************************
 * Ajax.Modal v0.1 (c) 2008 - Joey :: T-Design
 *
 * Vanuit deze class, kan je mooi div schermen
 * creeren die 'floaten' boven je pagina.
 * Leuk om te gebruiken als admin panel
 * dan hoef je niet apart een hele achterkant
 * te schrijven.
 *
 * Opties:
 *      w = breedte
 *      h = hoogte
 *      t = titel van modal
 *      c = class functie
 *      f = bestand om te laden (ajax methode)
 *      p = parameters
 *      r = true of false (Resizen)
 *
 **************************************************/
 
Ajax.Modal = Class.create();

Ajax.Modal.prototype = {
    initialize: function(w, h, t, f, p, r, u) {
        this.width = w || '150';
        this.height = h || '300';
        this.title = t || 'Admin :: Inloggen';
        this.file = f || 'backbase/php/page.php';
        this.params = p || '?pa=authenticate';
        this.resizable = r || false;
        this.ajaxUpload = u || true;
        
        if(!$('modalOverlay')) { // Als de overlay nog niet bestaat maken.. anders niets doen       
            this.buildModal(this.width, this.height);
        }
    },
    
    buildModal: function(w, h) {
        this.width = w;
        this.height = h;
        
        /******************************
         * Div Layout
         * <div id="modalWrapper">
         *      <div id="modalTop"><span>Nieuw Entry :: Portfolio</span></div>
         *      <div id="modalMiddle"><form></form></div>
         *      <div id="modalBottom"></div>
         * </div>
         ******************************/
         
        this.mOverlay = document.createElement('div');
        this.mOverlay.setAttribute('id', 'modalOverlay');
        this.mOverlay.className = 'mOverlay';
        this.mOverlay.style.cssText = '; display:none; height:' + document.body.scrollHeight + 'px; width:' + document.body.scrollWidth + 'px;';
        // CSS Parameters toevoegen.. IE & FF verschillend...
        if (document.all) {
            this.mOverlay.style.cssText += '; margin:0; filter:alpha(opacity=65); opacity:.65; padding:25px 10px;';
        } else {
            this.mOverlay.style.cssText += 'opacity:.65; padding:8px;';
        }
        
        this.mWrapper = document.createElement('div');
        this.mWrapper.setAttribute('id', 'modalWrapper');
        this.mWrapper.className = 'mWrapper';
        this.mWrapper.style.cssText = 'left:' + (Math.floor(document.body.scrollWidth / 2) - Math.floor(this.width / 2)) + 'px; top:' + ((!document.all) ? (window.pageYOffset + ((window.innerHeight / 2) - (this.height / 2))) : (document.documentElement.scrollTop + + ((document.documentElement.clientHeight / 2) - (this.height / 2)))) + 'px; display:none; height:' + this.height + 'px; width:' + this.width + 'px;';
        
        this.mTop = document.createElement('div');
        this.mTop.setAttribute('id', 'modalTop');
        this.mTop.style.cssText = 'cursor:move';
        
        this.mTopSpan = document.createElement('span');
        this.mTopSpan.setAttribute('id', 'modalTopTitle');
        this.mTopSpan.innerHTML = this.title;
        
        this.mTopClose = document.createElement('span');
        this.mTopClose.setAttribute('id', 'mCloseBut');
        this.mTopClose.className = 'mCloseBut';
        this.mTopClose.style.cssText = 'top:-13px;';
        this.mTopClose.innerHTML = 'Sluiten [x]';
        
        this.mTop.appendChild(this.mTopSpan);
        this.mTop.appendChild(this.mTopClose);
        
        this.mMiddle = document.createElement('div');
        this.mMiddle.setAttribute('id', 'modalMiddle');
        
        this.mBottom = document.createElement('div');
        this.mBottom.setAttribute('id', 'modalBottom');
        
        this.mWrapper.appendChild(this.mTop);
        this.mWrapper.appendChild(this.mMiddle);
        this.mWrapper.appendChild(this.mBottom);
        
        document.body.appendChild(this.mOverlay);
        document.body.appendChild(this.mWrapper);
        
        new Draggable('modalWrapper', { handle: 'modalTop'});
        
        if(this.resizable == true) {
            new ModalResize(this.mWrapper);
        }
        
        if(this.ajaxUpload == true) {
            new Ajax.Upload();
        }
        
        this.butObserve(this.mTopClose);
        this.ajaxCall();
    },
    
    butObserve: function(elem) {
        this.elem = elem;
        
        Event.observe(this.elem, 'click', function() { 
            new Effect.Fade(elem.parentNode.parentNode.id, { duration: 0.5 });
            new Effect.Fade('modalOverlay', { queue: 'end', duration: 0.3, afterFinish: function() { 
                Element.remove('modalOverlay');
                Element.remove('modalWrapper'); } 
            });
        }, false);
    },
    
    ajaxCall: function() {
        this.options = {
            asynchronous: false,
            method: 'get',
            parameters: this.params,
            onSuccess: this.parseAjax.bind(this)
        }
        
        new Ajax.Request(this.file, this.options);
    },
    
    parseAjax: function(t) {
        new Effect.Appear(this.mOverlay, { duration: 0.3, to: 0.65 });
        new Effect.Appear(this.mWrapper, { duration: 0.5, queue: 'end' });
        
        this.mMiddle.innerHTML = t.responseText;
        this.observeAjaxResponse(); // observe de class waar de file geload word..
    },
    
    observeAjaxResponse: function(c) {
        Event.observe('submit', 'click', function() { 
            this.admin = new Ajax.CMS();
            this.admin.checkAuth('authForm', 'backbase/php/page.php?pa=authenticate');              
        }, false);    
    }
};