var SubFrame = new Class({
    Implements: [Options, Events],
    
    options: {
        width:      350,
        height:     250,
        radius:     10,
        opacity:    0.7,
        bg_colour:  '#000000',
        text_colour:'#FFFFFF'
    },
    
    parent: false,
    visible: (function() { this._container.get('visibility') }),
    _iframe: false,
    _container: false,
    
    
    initialize: function(container, options) {
        this.parent = container;
        this.setOptions(options);
        this.create_elements();
    },
    
    set_visible: function() {
        this._container.setStyle('display', 'inline-block');
    },
    set_hidden: function() {
        this._container.setStyle('display', 'none');
    },
    set_src: function(url) {
        if(url) {
            var ts = new Date().getTime();
            if ( url.indexOf('?') === -1 ) {
                url += '?_=' + ts;
            } else {
                url += '&_=' + ts;
            }
            this._iframe.set('src', url);
        } else {
            this.set_hidden();
        }
    },
    handle_json: function(action, json) {
        this.fireEvent(action, json);
    },
    create_elements: function() {
    
        var doc_size = this.parent.getSize();
        
        var width = this.options.width + (this.options.radius * 2);
        var height = this.options.height + (this.options.radius * 2);
        
        this._container = new Element('div', {
            'class': 'sf_container',
            styles: {
                position:   'fixed',
                opacity:    this.options.opacity,
                'background-color': this.options.bg_colour,
                'border-radius': this.options.radius + 'px',
                'z-index':  1000000
            }
        });
        
        this._iframe = new Element('iframe[src=about:blank]', {
            styles: {
                top:        this.options.radius,
                left:       this.options.radius,
                position:   'absolute',
                border:     'none',
                background: 'transparent'
            }
        });
        this._iframe.set('frameborder',     'no');
        this._iframe.set('scrolling',       'no');
        this._iframe.set('allowtransparency', 'true');
        this._iframe.set('transparency',    'true');
        
        var close_button = new Element('a[href=#][text=X]', {
            'class': 'sf_close',
            styles: {
                position:   'absolute',
                right:      -18,
                top:        -18,
                color:      this.options.text_colour
            },
            events: {
                click: function(e) {
                    new Event(e).stop();
                    this.set_hidden();
                }.bind(this)
            }
        });
        
        this._iframe.inject(this._container);
        close_button.inject(this._container);
        this._container.inject(this.parent);
        
        //this.resize(0, 0);
        this.set_hidden();
        
    },
    
    move_box: function() {
        /*var height = this._container.getSize().y + (this.options.radius * 2);
        var width = this._container.getSize().x + (this.options.radius * 2);
        
        new Fx.Morph(this._container).start({
            top:        (document.getSize().y - height - (this.options.radius * 2)) / 2,
            left:       (document.getSize().x - width - (this.options.radius * 2)) / 2
        });*/
    },
    
    resize: function(width, height) {
        // Check current width isnt 0
        var c_width = width + (this.options.radius * 2);
        var c_height = height + (this.options.radius * 2);
        var top = (this.parent.getSize().y - c_height) / 2;
        var left = (this.parent.getSize().x - c_width) / 2;
        
        if(this._container.getSize().x == 0) {
        
            this._container.setStyles({
                width:      c_width,
                height:     c_height,
                top:        top,
                left:       left
            });
            
            this._iframe.setStyles({
                width:      width,
                height:     height
            });
            
        } else {
            
            new Fx.Morph(this._container).start({
                width:      c_width,
                height:     c_height,
                top:        top,
                left:       left
            });
            
            new Fx.Morph(this._iframe).start({
                width:      width,
                height:     height
            });
        
        }
        
        this.options.width = width;
        this.options.height = height;
    }
});