/*-------------------------------  ModalBox  -----------------------------------------*/

var ModalBox = {

	yPos : 0,
	xPos : 0,

	initialize: function() {
		this.box        = $('modal_box');
		this.overlay    = $('modal_box_overlay');
		this.title      = $('modal_box_title');
		this.content    = $('modal_box_content');
		this.eventOnResize = this.center.bindAsEventListener(this);
		this.eventOnKeyUp  = this.onKeyUp.bindAsEventListener(this);
		this.draggable = false;
	  //this.box.style.position = "absolute";
		Event.observe(window, 'resize', this.eventOnResize, false);
		Event.observe(window, 'keyup', this.eventOnKeyUp, false);
	},
  
	// Turn everything on - mainly the IE fixes
	show: function(title) {
	  this._showIE();
	  if (!this.draggable) {
	    this.draggable = new Draggable(this.box, {
	      handle: this.title,
	      endeffect: false,
	      starteffect:false,
	      zindex:99999});
    }
	  if (title) this.setTitle(title);
		this.box.style.visibility = "hidden";
		Element.show(this.box);
		this.center();
		this.box.style.visibility = "visible";
		Element.show(this.overlay);
	},
	
	_showIE: function() {
	  if (/MSIE/.test(navigator.userAgent)){
			this.getScroll();
			this._prepareIE('100%', 'hidden');
			this.setScroll(0,0);
			this.hideSelects();
		}
	},
	
	// Example of creating your own functionality once ModalBox is initiated
	hide: function(){
		if (/MSIE/.test(navigator.userAgent)){
			this.setScroll(0,this.yPos);
			this._prepareIE("auto", "auto");
			this.showSelects();
		}
		Element.hide(this.overlay);
		Element.hide(this.box);
	},

	// Ie requires height to 100% and overflow hidden or else you can scroll down past the ModalBox
	_prepareIE: function(height, overflow){
		bod = document.getElementsByTagName('body')[0];
		bod.style.height = height;
		bod.style.overflow = overflow;
  
		htm = document.getElementsByTagName('html')[0];
		htm.style.height = height;
		htm.style.overflow = overflow; 
	},
	
	// In IE, select elements hover on top of the ModalBox
	showSelects: function() { 
	  this.setSelectsVisibility(document.getElementsByTagName('select'), 'visible');
	},

	hideSelects: function() {
	  this.setSelectsVisibility(document.getElementsByTagName('select'), 'hidden');
	  this.setSelectsVisibility(this.content.getElementsByTagName('select'), 'visible');
	},

	setSelectsVisibility: function(selects, visibility){
		for(i = 0; i < selects.length; i++) {
			selects[i].style.visibility = visibility;
		}
	},
	
	// Taken from ModalBox implementation found at http://www.huddletogether.com/projects/lightbox/
	getScroll: function(){
		if (self.pageYOffset) {
			this.yPos = self.pageYOffset;
		} else if (document.documentElement && document.documentElement.scrollTop){
			this.yPos = document.documentElement.scrollTop; 
		} else if (document.body) {
			this.yPos = document.body.scrollTop;
		}
	},
	
	setScroll: function(x, y){
		window.scrollTo(x, y); 
	},
  	
	center: function(e) {
	  var width, height;
	  if (window.innerWidth) {
	    width  = window.innerWidth 
	    height = window.innerHeight 
	  } else {
	    width  = document.body.clientWidth;
	    height = document.body.clientHeight; 
    }
	  this.box.style.left = Math.round((width  - this.content.offsetWidth)  / 2) + 'px';
	  this.box.style.top  = Math.round((height - this.content.offsetHeight) / 3) + 'px';
	},
	
	setTitle: function(title) {
    this.title.innerHTML = title ? title : "";
	},
	
	onKeyUp: function(event) {
	  if (event.keyCode == Event.KEY_ESC) this.hide();
	}
	
}