var Popup = new Class({
    shown: false,
	pop_cover_shown: false, 
	pop_size: {},
	
	Implements: [Options, Events],
	
	options: {
		//'onPopShow': $clear,
		//'onPopHide' : $clear,
		//'onPopHideComplete': $clear,
		//'onPopHideContent': $clear,
		'height': 425,
		'width' : 510
	},
	
	initialize: function(options){
		this.pop_window_container  = $('pop_window_container');
		
		if(!this.pop_window_container) return;
		
		this.pop_window  = $('pop_window');
		this.pop_cover   = $('pop_cover');
		this.pop_title   = this.pop_window_container.getElement('#pop_title');
		this.pop_stage   = this.pop_window_container.getElement('#pop_stage');
		this.pop_stage_content = this.pop_stage.getElement('.content');
		this.pop_buttons = this.pop_window_container.getElement('#pop_buttons');
		this.pop_close   = this.pop_window_container.getElement('#pop_close_link');
		this.pop_window_cover = this.pop_window_container.getElement('#pop_window_cover');
		this.pop_window_cover_content = this.pop_window_container.getElement('#pop_window_cover_content');

		if(!this.pop_window_container || !this.pop_cover) return;
		
		this.shown = false;
		
		this._build();
		
		window.addEvent('resize', function(){
			this.center();
		}.bind(this));
	},
	
	_build: function(){
		this.pop_window_container.store('fx', new Fx.Morph(this.pop_window_container, {
			transition: Fx.Transitions.Quad.easeInOut,
			'duration': 300
		}));
		
		this.pop_cover.store('fx', new Fx.Morph(this.pop_cover, {
		    'duration': 150
		}));
		
		this.pop_close.addEvent('click', function(e){
			e.stop();
			this.hide();
		}.bind(this));
		
		return this;
	},
	
	_getPopSize: function(){
    	this.pop_size = this.pop_window.getSize();
	    return this;
	},
	
	center: function(){
		if(this.shown){
			var scroll_size = window.getScrollSize(),
			    size = window.getSize(),
			    scroll = window.getScroll(),
			    start = scroll_size.y - size.y < 0 ? scroll_size.y - size.y : size.y,
			    top = ((size.y - this.pop_size.y) / 2) + scroll.y;
			
			this.pop_window_container.setStyles({
				'top': top,
				'opacity': 1
			});
		}
		
		return this;
	},
	
	title: function(title){
		if(title){
			this.pop_title.set('html', title);
		}
		
		return this;
	},
	
	content: function(content){
		if(content){
		    this.fireEvent('popHideContent');
		    
			switch($type(content)){
				case 'element':
					this.pop_stage_content.empty().adopt(content);
					break;
				
				case 'string':
					this.pop_stage_content.set('html', content);
					break;
			}
		}
		
		return this;
	},
	
	buttons: function(buttons){
		if(buttons){
			switch($type(buttons)){
				case 'array':
				case 'element':
					this.pop_buttons.empty().adopt(buttons);
					break;
				
				case 'string':
					this.pop_buttons.set('html', buttons);
					break;
			}
		}
		
		return this;
	},
	
	show: function(title, content, buttons){
		this.title(title).content(content).buttons(buttons)._getPopSize().center();
		
		this.shown = true;
		
		this.pop_cover.retrieve('fx').start({
			'opacity': [0, .45],
			'display': 'block'
		}).chain(function(){
			this.center();
		}.bind(this));
		
		return this;
	},
	
	hide: function(callback){
		this.shown = false;

		this._getPopSize();
	    this.fireEvent('popHide');
		
		this.pop_window_container.retrieve('fx').start({
			
			'opaicty': 0
		}).chain(function(){
			this.pop_cover.retrieve('fx').start({
				opacity: 0
			}).chain(function(e){
			    if($type(callback) === 'function'){
			        callback();
			    }
			    this.pop_window_container.setStyle('top', (2000) * -1);
			    this.fireEvent('popHideComplete');
			    this.fireEvent('popHideContent');
			}.bind(this));
		}.bind(this))
	},
	
	popCover: function(action, content){
	    switch(action){
	        case 'show':
	            if(!this.pop_cover_shown){
	                var pop_size = this.pop_window.getSize();

    	            this.pop_window_cover.setStyles({
    	                'width': pop_size.x,
    	                'height': pop_size.y,
    	                'top': 0,
    	                'left': 0,
    	                'opacity': .8
    	            });
    	        }
	            
	            switch($type(content)){
    				case 'element':
    					this.pop_window_cover_content.empty().adopt(content);
    					break;

    				case 'string':
    					this.pop_window_cover_content.set('html', content);
    					break;
    			}
    			
	            this.pop_cover_shown = true;
	            break;
	            
	        case 'hide':
	        default:
	            if(this.pop_cover_shown){
	                this.pop_window_cover_content.set('html', '');
    	            this.pop_window_cover.setStyles({
    	                'width': 0,
    	                'height': 0,
    	                'top': 0,
    	                'left': 0
    	            });
    	        }    

                this.popCoverHideEvent('remove');
    	        
	            this.pop_cover_shown = false;
	            break;
	    }
	    
	    return this;
	},
	
	popCoverHideEvent: function(action){
	    switch(action){
	        case 'add':
	            this.pop_window_cover.addEvent('click', function(){
	                this.popCover('hide');
	            }.bind(this));
	            
	            this.pop_window_cover.addClass('pointer');
	            break;
	        
	        case 'remove':
	        default:
	            this.pop_window_cover.removeEvents();
	            this.pop_window_cover.removeClass('pointer');
	            break;
	    }
	    
	    return this;
	}
});

Popup.Form = new Class({
	Implements: [Options, Events],
	
	options: {
		//'onSubmitComplete': $clear,
		'cover_message': 'LOADING...'
	},
	
	initialize: function(form_ele, options){
		this.form_ele = $(form_ele);
		this.hidden_forms = $('hidden_forms');
		
		if(!this.form_ele) return;
		
		this.setOptions(options);
		
		this._formAction()._build();
	},
	
	_build: function(){	    
	    window.popup.addEvent('popHideContent', function(){
            if(window.popup.pop_stage.hasChild(this.form_ele)){
                this.hidden_forms.adopt(this.form_ele);
                window.popup.pop_buttons.empty();
                this.reset();
            }
        }.bind(this));
	
		return this;
	},

	_formAction: function(){
		this.form_req = new Request({
			'url' : this.form_ele.get('action'), 
			'method': 'post',
			'onComplete': function(response){
			    var resp = JSON.decode(response);
			    
			    switch(resp.status){
			        case 'error':
			            var m = resp.message || '';
			            var message = m + '<ul>';
                        
                        for(var i in resp.error_fields){
                            message += '<li>'+ resp.error_fields[i] + '</li>';
                        }
                        
                        message += '</ul>';                        
                        window.popup.popCover('show', message);
                        window.popup.popCoverHideEvent('add');
			            break;
			        
			        case 'success': 
                        //window.popup.popCover('hide');
                        window.popup.popCover('show', resp.message);
                        window.popup.popCoverHideEvent('add');
                        this.form_ele.reset();
			            break;
			    }
			    
				this.fireEvent('submitComplete', [resp]);
			}.bind(this)
		});
		
		this.form_ele.addEvent('submit', function(e){
			if(e){
			    e.stop();
			}

			window.popup.popCover('show', this.options.cover_message);
			this.form_req.send(this.form_ele.toQueryString());
		}.bind(this));
		
		return this;
	},
	
	reset: function(){
		this.form_ele.reset();
		
		return this;
	},
	
	show: function(){
		var title = this.form_ele.get('title');
		
		window.popup.show(title, this.form_ele, this.buttons);
	},
	
	hide: function(){
	    this.current_step = 0;
	    
		window.popup.hide(this.reset.bind(this));
	}
});

Popup.iFrame = new Class({
    shown: false,
    
    Implements: [Options, Events],
    
    options: {
        onShow: $empty,
        onHide: $empty,
        offset: 50,
        width: false,
        height: false,
        src: '/blank.html'
    },
    
    initialize: function(options){
        this.container = $('iframe_pop');
        
        if(!this.container){
            return;
        }
        
        this.window = this.container.getElement('#iframe_pop_window');
        this.hide_btn = this.container.getElement('#iframe_pop_hide');
        this.title = this.container.getElement('#iframe_pop_title');
        this.cover = $('iframe_pop_page_cover');
        
        this.setOptions(options);
        this._build();
        
        window.addEvent('resize', function(){
            if(this.shown){
                this.container.morph(this.position());
            }
        }.bind(this));
    },
    
    
    _build: function(){
        this.container.setStyles({
            'display': 'block',
            'opacity': 0,
            'top': -99999
        });
        
        this.iframe = new Element('iframe', {
            'src': this.options.src
        }).inject(this.window);
        
        this.hide_btn.addEvent('click', function(e){
            e.stop();
            
            this.hide();
        }.bind(this));
        
        return this;
    },
    
    position: function(){
        var size = this.container.getSize(),
            wsize = window.getSize(),
            scroll_size = window.getScroll(),
            width = this.options.width || wsize.x - (this.options.offset * 2),
            height = this.options.height || wsize.y - (this.options.offset * 2) + 40,
            top = (wsize.y - height) / 2,
            left = (wsize.x - width) /2,
            pos = {
                'top': top,
                'left': left,
                'width': width,
                'height': height
            };

        return pos;
    },
    
    show: function(title, src){
        this.cover.setStyles({'opacity': .45, 'display': 'block'});
        
        if(title){
            this.title.set('html', title);
        }
        
        if(src){
            this.iframe.set('src', src);
        }
        
        var pos = this.position();        
        
        this.iframe.setStyles({ 
            'height': pos.height - 70,
            'width': '100%'
        });
        this.container.setStyles(pos);
        this.container.morph({
            'opacity': 1
        });
        
        this.shown = true;
        
        return this;
    },
    
    showContent: function(content){
        var pos = this.position();
        
        this.window.setStyle('height', pos.height - 70).set('html', content);
        this.container.setStyles(pos);
        this.container.morph({
            'opacity': 1
        });
        
        return this;
    },
    
    hide: function(){
        this.cover.setStyle('opacity', 0);
        this.container.morph({
            'opacity': 0
        });
        
        this.container.setStyles({
            'top': -9000,
            'left': -9000
        });
        
        this.shown = false;
        
        return this;
    }
});