cabox = new Class({
    Implements: Options,
    
    options: {
        'width':500,
        'height':500,
        'startx':($(window).getCoordinates().width/2),
        'starty':($(window).getCoordinates().height/2),
        'scroll':true,
        'zIndex':4999,
        'primary_color':'#101010',
        'secondary_color':'#1a1a1a',
		'page_id':0,
        'close':$empty,
        'scrollable':true,
		'show-close-btn':true,
		'show_overflow':false,
		'unique_id':0,
		'sbox_class':'sbox',
		'ext_parameter':'',
		'submit_once':false,
		'box_content':'',
		'url':''
    },
    
    initialize: function(options){
        
        this.setOptions(options);
        this.submitted = 0;
        this.scroll_position = 0;
        this.br = new Element('br',{'class':'clear'});
        this.scroll_size = 0;
        // background
        
        this.body = $$('body');
        
        this.box_background = new Element('div',{'class':'sbox-background'});
        this.box_background.setStyles({'display':'none','position':'fixed','background-image':'url(obray/images/box/sbox/bg.png)','left':0,'top':0,'width':document.body.getCoordinates().width,'height':document.body.getCoordinates().height+9,'z-index':4998});
        // box
        this.box = new Element('div',{'class':this.options.sbox_class,'id':'sbox'+this.options.unique_id});
        this.box.setStyles({'position':'fixed','width':0,'height':0,'left':this.options.startx,'top':this.options.starty,'margin-left':0,'background-color':'transparent','z-index':this.options.zIndex,'-webkit-border-bottom-left-radius':'5px','-webkit-border-bottom-right-radius': '5px','-webkit-border-top-left-radius': '5px','-webkit-border-top-right-radius': '5px','-moz-border-radius':'5px 5px 5px 5px','background-color':this.options.primary_color,'padding':10,'opacity':0});
        // content
        this.content = new Element('div',{'class':'box-content'});
		if(this.options.show_overflow == true) this.content.setStyles({'position':'relative','width':'100%','height':'100%','overflow-x':'visible','overflow-y':'visible','overflow':'visible','scrollbar-base-color':'#369','background-color':this.options.secondary_color});
		else this.content.setStyles({'position':'relative','width':'100%','height':'100%','overflow-x':'hidden','overflow-y':'hidden','scrollbar-base-color':'#369','background-color':this.options.secondary_color});
		if(this.options.url != '') var myRequest = new Request.HTML({'url':'/index.cfm?action=pages.popupContentArea&page_id='+this.options.page_id, 'evalScripts':true, 'update':this.content}).send();
		
        this.content.inject(this.box);
        this.contentScroll = new Fx.Scroll(this.content,{'duration':10});
        
        this.scrollbar = new Element('div',{'class':'oscroll'});
        this.scrollbar.setStyles({'background-position':'-15px 0px','position':'absolute','opacity':0,'right':5,'top':15,'width':15,'cursor':'pointer','background-image':'url(obray/images/box/sbox/scrollbar-bg.png)'});
        this.scrollbar.inject(this.box);
       
        this.scrollbar_handle = new Element('div',{'class':'oscroll-handle'});
        this.scrollbar_handle.setStyles({'background-image':'url(obray/images/box/sbox/scrollbar.png)','width':14,'height':64,'overflow':'hidden'});
        this.scrollbar_handle.inject(this.scrollbar);
        this.scrollbar_handle.addEvent('mouseenter',function(){ this.scrollbar_handle.setStyles({'background-position':'-15px 0px'}); }.bind(this));
        this.scrollbar_handle.addEvent('mouseleave',function(){ this.scrollbar_handle.setStyles({'background-position':'0px 0px'}); }.bind(this));

        this.scrollbar_top = new Element('div',{'class':'oscroll-top'});
        this.scrollbar_top.setStyles({'position':'absolute','right':6,'top':0,'width':3,'height':4,'background-image':'url(obray/images/box/sbox/scrollbar-top.png)'});
        this.scrollbar_top.inject(this.scrollbar);
        
        this.scrollbar_bottom = new Element('div',{'class':'oscroll-bottom'});
        this.scrollbar_bottom.setStyles({'position':'absolute','right':6,'bottom':2,'width':3,'height':4,'background-image':'url(obray/images/box/sbox/scrollbar-bottom.png)'});
        this.scrollbar_bottom.inject(this.scrollbar);
                
        this.content.addEvent('mousewheel',function(e){
            this.scroll_position = this.scroll_position-e.wheel;
            try{this.scrollbar_slider.set(this.scroll_position);} catch(err){}
        }.bind(this));
        
        this.interval = 0;
        
        this.boxFx = new Fx.Morph(this.box,{'duration':800,'transition':Fx.Transitions.Quint.easeOut,'onComplete':function(){
            this.scrollbar.setStyles({'height':this.options.height});
            $clear(this.interval);
            this.interval = this.adjustScrollHeight.periodical(500,this);
        }.bind(this)});
        
        // close button
		if(this.options['show-close-btn'] == true){
			this.close_btn = new Element('div',{'class':'close-btn'});
			this.close_btn.setStyles({'position':'absolute','right':-10,'top':-10,'background-image':'url(obray/images/box/boxClose_btn.png)','width':30,'height':30,'cursor':'pointer','z-index':5010});
			this.close_btn.inject(this.box);
			this.close_btn.addEvent('click',function(){ this.close(); }.bind(this));
		}
        // adjust for changing scroll height
        
        // resize event
        window.addEvent('resize',function(){
            this.box_background.setStyles({'width':document.body.getCoordinates().width,'height':document.body.getCoordinates().height+9})
            this.box.setStyles({'left':this.center().x,'top':this.center().y});
        }.bind(this))
        
        
        
    },
    
    adjustScrollHeight: function(){
        if(this.scroll_size != this.content.getScrollSize().y-this.options.height){
            this.scrollbar.setStyles({'opacity':1});
            this.scrollbar_slider = new Slider(this.scrollbar,this.scrollbar_handle,{'mode':'vertical','steps':this.content.getScrollSize().y-this.options.height,'onChange':function(step){
                this.contentScroll.set(0,step);
                this.scroll_position = step;
            }.bind(this)});
            this.scroll_size = this.content.getScrollSize().y-this.options.height;
            this.scrollbar_slider.set(this.scroll_position);
        }
        if(this.content.getScrollSize().y-this.options.height <= 0){
            this.scrollbar.setStyles({'opacity':0});
        }
    },
    
    scrollUp: function(distance){
        this.contentScroll.pause();
        var scroll_to = this.content.getScrollSize().y-this.options.height+distance-50;
    },
    
    scrollDown: function(distance){
        this.contentScroll.pause();
        var scroll_to = (this.content.getScrollSize().y-this.options.height-distance-15);
        this.contentScroll.toBottom()
    },

    center: function(){
        var x = document.body.getCoordinates().width/2;
        var y = document.body.getCoordinates().height/2;
        return {'x':x-20,'y':y};
    },
    
    open: function(){
		if(this.options.submit_once && this.submitted == 1) return;
		if(this.options.box_content != '') {
			//this.content.set('html', document.getElementById(this.options.box_content).clone().innerHTML);
			window[this.options.box_content].inject(this.content,true);
		}
        var body = $(document.body);
        this.box.inject(body);
        this.box_background.inject(body);
        document.body.setStyles({'overflow':'hidden'})
        this.box_background.setStyles({'display':'block'});
        this.box.setStyles({'display':'block'});
        //document.body.setStyles({'overflow-y':'hidden'});
        this.boxFx.pause();
		this.submitted = 1;
        this.boxFx.start({'left':this.center().x,'top':this.center().y,'width':this.options.width,'height':this.options.height,'opacity':1,'margin-left':-(this.options.width/2),'margin-top':-(this.options.height/2)});
    },
    submitClose: function() {
		this.submitted = 1;
		this.options.close();
        this.boxFx.pause();
        this.boxFx.start({'left':this.options.startx,'top':this.options.starty,'width':0,'height':0,'opacity':0,'margin-left':0,'margin-top':0}).chain(function(){}.bind(this));
        this.box_background.setStyles({'display':'none'});
        if(this.options.scroll){document.body.setStyles({'overflow':'scroll'});}
	},
	
    close: function(){
		this.submitted = 0;
        this.options.close();
        this.boxFx.pause();
        this.boxFx.start({'left':this.options.startx,'top':this.options.starty,'width':0,'height':0,'opacity':0,'margin-left':0,'margin-top':0}).chain(function(){}.bind(this));
        this.box_background.setStyles({'display':'none'});
        if(this.options.scroll){document.body.setStyles({'overflow':'scroll'});}
    }
});