var Moobox = new Class({

	getOptions: function(){
		return {
			'moobox_opacity' : .8,
			'width': '500px'
		};
	},

	initialize: function(elements, options){  	
		this.setOptions(this.getOptions(), options);
		
		body_height = document.body.getCoordinates().height + 20;
		
	  //Set up the background box
		this.overlay = new Element('div').addClass('moobox_overlay').setStyles({
			'position': 'absolute',
			'top': '0',
			'margin': '0',
			'left': '0',
			'padding': '0',
			'width': '100%',
			'height': body_height + 'px',
			'background-color' : 'black',
			'display' : 'none'
		}).injectInside(document.body);			
		//this.overlay.addEvent('click', this.hideBg.bind(this));
		this.overlay_fx = new Fx.Style(this.overlay, 'opacity');	
		
		this.wrapper = new Element('div').addClass('moowrap').setStyles({
  		'display': 'none',
		  'position': 'absolute',
		  'padding' : '0',
		  	'margin': '0',
		  'background-color' : '#222',
      'border':'0',
		  'width' : this.options.width
	  });
		//Set up the moobox	
		this.moobox = new Element('div').addClass('moobox').injectInside(this.wrapper);
		//this.gibs.setStyle({'padding': '0', 'margin' : '0'});
		//this.moobox = this.gibs
    this.moobox.setStyle('border','0');
		
		
	  //The close button
		var close_box = new Element('div').addClass('moobox_close').setStyles({
  	        'text-align': 'right',
  	        'padding' : '0',
            'margin': '10px',
            'border':'0',
            'background-color' : '#222'
		});
		var close_link = new Element('a').addClass('moobox_close_link').injectInside(close_box).setStyles({'background-color' : '#222', 'color' : '#ccc'});
		close_link.innerHTML = 'Close Me';
		close_link.addEvent('click', this.hideBg.bind(this));
		close_box.injectInside(this.wrapper);
		
		document.body.appendChild(this.wrapper);
		
		//Make sure to move the box if we scroll
		window.addEvent('scroll', this.maintPos.bind(this));
		window.addEvent('resize', this.maintPos.bind(this));
		
		//Apply the moobox to the selected elements
		$each(elements, function(el){
			this.build($(el));
		}, this);

	},

	build: function(el){
  	el.addEvent('click', function(e) { this.showMoobox(e, el); }.bind(this));
	},

	//Show the BG
	showBg: function() {
  	this.active = true;
  	//Fade the bg
  	this.overlay.setStyles({
    	'opacity' : 0,
    	'display' : 'block'
    });
  	this.overlay_fx.start(0,this.options.moobox_opacity);
	},
	
	hideBg: function() {
  	this.active = false;
    this.overlay.setStyle('display', 'none');
    this.hideMoobox();
    //If the original content was injected, kick it back out to its parent
    if (this.moobox_type == 'in_page' && !this.options.clone_content) {
      this.orig_content.injectInside(this.orig_parent);
      this.orig_content.setStyle('display', 'none');
    }
	},
	
	showMoobox: function(e, el) {  	
  	this.showBg();	
  	
    //Figure out which type of box (light, grey, dark, black, etc) to render by looking at the href type using the rel as potential hint for the filetype
    this.moobox_type = 'ajax'; 
    
    //Figure out the filetype
    if (el.href.indexOf('#') > -1) {
      filename = el.href;
      this.moobox_type = 'in_page';
    } else {
      var url_parts = el.href.split('?');
      //Find the last occurence of /
      filename = url_parts[0].substr(url_parts[0].lastIndexOf('/')+1);
      if (filename.match(/(\.jpg|\.png|\.gif|\.bmp|.jpeg)$/i)) {
       this.moobox_type = 'image';
      }
    }
    
    this.wrapper.style.zIndex = 1;
    switch(this.moobox_type) {
      case 'in_page':
        //Figure out the object identified
        var id = filename.substr(filename.indexOf('#') + 1);
      	if (this.options.clone_content) {
        	var new_elem = $('inner_content').clone().injectInside(this.moobox);
      	} else {
        	this.orig_content = $(id);
        	this.orig_parent = $(id).parentNode;
        	
        	//Shove it behind
        	$(id).style.zIndex = 1;
        	//We need to grab its width, and so we have to show it for a second.
        	$(id).setStyles({
          	'visibility': 'hidden',
          	'display':'block'
        	});
        	
        	var width = $(id).offsetWidth;	
        	width = width ? width + 'px' : this.options.width;
        	this.resizeMoobox(width);
        	
        	//Now that we have the width, make it visible        	
        	$(id).injectInside(this.moobox);
        	$(id).setStyle('visibility', 'visible');     	
        }
        break;
      case 'image':
        //Pre-load the image
        
        //Resize the window based on the rel dimensions (if given)
        break;
      case 'ajax':
        //grey box style
        
        break;
    }
      
    //Display it first so we can get its size
    

    this.wrapper.setStyle('display', 'block');
    this.center(this.wrapper);
    this.wrapper.style.zIndex = 10000;
    if (e) {
    	e.stop();
  	}
	},
	
	resizeMoobox: function(width) {
  	if (this.options.animate_resize) {
      
    } else {
      this.wrapper.setStyle('width', width);	
    }
	},
	
	hideMoobox: function() {
  	this.wrapper.setStyle('display', 'none');	
	},
	
	getWrapperSize: function(el) {
  	//This is used to prevent flicker as the size is processed
  	var x = el.offsetWidth;
  	var y = el.offsetHeight;
    return { 'x' : x, 'y' : y };
	},
	
	center: function(elem) {
  	var el = $(elem);
  	var pageSize = window.getSize();
  	var elSize = this.getWrapperSize(elem);
  	var x = Math.round(pageSize.size.x/2) - (elSize.x /2) + pageSize.scroll.x;
  	var y = Math.round(pageSize.size.y/2) - (elSize.y /2) + pageSize.scroll.y;	
  	el.setStyles({ 'left' : x + 'px', 'top' : y + 'px'});
	},
	
	maintPos: function(e) {
  	if (this.active) {
      this.center(this.wrapper);
    }
	}
	
});
Moobox.implement(new Options);

//function debugSize(size) {
//  console.log(size.size.x + ',' + size.size.y + '|' + size.scrollSize.x + ':' + size.scrollSize.y + '|' + size.scroll.x + ':' + size.scroll.y); 
//}