/* VERSION: 1.1.3
 * 
 * 
 */
 
var VirtuaModal = new Class({
    
    Implements: [Options, Events],
    
    options : {
        mask: true,
        close:true,
        ajax:false,
        padding:10,
        style:'',
        clas:'',
        cancel:false,
        redirect:'',
        ok:true

    },    
    
    initialize: function(options){   
        this.setOptions(options);
    },
    
    open: function(data){
        //CONFIG
        var t           = this
        this.modalClose = false 
        if(this.options.ajax){
            this.load(data)
            data = "<div style='color:#ffffff;width:120px; height:30px;'><span style='position:absolute; margin-top:5px; margin-left:10px'>Loading</span></div>" 
        }
        //ELEMENTS
        this.content  = new Element('div', {'html':data});
        if(this.options.close){
            this.x        = new Element('a', {'html': "X", 'class':'vm-x'});
            this.content.grab(this.x)
        }
        this.buttons       = new Element('div', {'class':'vm-buttons'});
        if(this.options.ok){
            this.ok       = new Element('a', {'html': "Aceptar", 'class':'vm-ok'});
            this.buttons.grab(this.ok)
        }
        if(this.options.cancel){
            this.cancel  = new Element('a', {'html': "Cancel", 'class':'vm-cancel'});
            this.buttons.grab(this.cancel)
        }
        this.content.grab(this.buttons)
        
        
        
        $(document.body).grab(this.content);
        
        //STYLES
        this.content.addClass(this.options.clas);
        if(this.options.style!="")
        this.content.setStyles(this.options.style)
        var data_style = this.content.getElement("div")   
        
        var w = data_style.getCoordinates().width            
        var h = data_style.getCoordinates().height   
        if(this.content.getCoordinates().height > h){
        	h = this.content.getCoordinates().height 
        }
        
        if(w==0){
        	w = this.content.getStyle("width").toInt();
        }
		
        this.content.setStyles({'padding':this.options.padding+'px', 
                                'opacity' : '0',
                                'position': 'fixed',
                                'left':'50%',
                                'top':'50%',
                                'z-index' : '11',
                                'width' :w,
                                'height':h,
                                'margin-left': '-'+w/2-this.options.padding+"px",
                                'margin-top': '-'+h/2-this.options.padding+"px"
                                });
        if(this.options.close){
            this.x.setStyles({'color':'#666666',
                              'font-family' : 'arial',
                              'font-size' : '16px',
                              'font-weight' : 'bold',
                              'position' : 'absolute',
                              'top' : '18px',
                              'right' : '6px',
                              'cursor':'pointer'
                              });
        }
        if(this.options.ok){
            this.ok.setStyles({'cursor':'pointer',
                               'float':'left' 
                              });
        }
        if(this.options.cancel){
                 this.cancel.setStyles({'cursor':'pointer',
                                        'float':'right' 
                                       });
                          
             this.cancel.addEvent('click', function(){ 
                t.close() 
                return false
             });
        }
        if(this.options.close){    
            this.x.addEvent('click', function(){ t.close() });
        }
        if(this.options.ok){   
            this.ok.addEvent('click', function(){ 
                t.close() 
                if(t.options.redirect!=""){
                    window.location.href = t.options.redirect
                }
            });
        }
        

        //SHOW
        if(this.options.mask){
            this.mask   = new Mask('mask',  {style: {'background-color':'#000000',
                                                     'opacity' : '0.3',
                                                     'filter': 'alpha(opacity = 30)',
                                                     'z-index' : '10'}, 
                                             onClick: function(){t.close()}});
            this.mask.show()
        }
        this.content.fade("show")
    },
    
    close: function(){
        this.content.dispose();
        if(this.options.mask){
            this.mask.destroy();
        }
        this.modalClose = true
        if(this.options.cancel==false && this.options.redirect!=""){
        	window.location.href = this.options.redirect
        }
    },
    
    load: function(url){
         var t = this
         var ajax = new Request({
             method: 'post',
        	 url:    url,
        	 onRequest: function(){},
             onFailure: function(){alert('Error: vm-101')},
             onSuccess: function(data){
                if(!t.modalClose)
                t.reload(data)
         	 }
          }).send(); 
    },
    
    reload: function(data){
        this.content.set("html", data)
        
        //STYLES
        var data_style = this.content.getElement("div")   
            data_style.fade('hide')
        var w         = data_style.getCoordinates().width
        var h         = data_style.getCoordinates().height        
        var myEffect = new Fx.Morph(this.content, {duration: 'short', transition: Fx.Transitions.Sine.easeOut});
            myEffect.start({
              
                    'height': h,
                    'width': w,
                    'margin-left': '-'+w/2-this.options.padding+"px",
                    'margin-top': '-'+h/2-this.options.padding+"px"
            });
        this.content.grab(this.x)
        data_style.fade('in')
    }
});