/**
 * Dialog box with the following characteristic:
 *	- centered div in middle of screen that is sensitive to mouse clicks
 *  - greyed out background
 *  - click in background removes dialog box
 * 
 * Adapted from: http://snippets.dzone.com/posts/show/3411
 * with getPageSize from Lightbox2: http://www.lokeshdhakar.com/projects/lightbox2/ 
 *
 * Note: The prototype version 1.6.0.2 (current stable from Jan 28th 2008 does not return
 *       the correct viewport sizes in neither IE 7 nor FF 2... The current trunk version does so
 *       only in FF2 but not in IE. Version 1.6.0 does work correctly in IE 7, FF 2, Opera 9
 *
 * Usage: 
 *  - Create div with dialog content and set style="display:none".
 *  - Create Dialog box by calling: new Dialog.Box('id_of_div')
 *  - To show:  $('id_of_div').show();
 *  - To hide (besides of click in background):  $('id_of_div').hide();
 */
var Dialog = {};
Dialog.Box = Class.create();
Object.extend(Dialog.Box.prototype, {
	initialize: function(id, noOverlay, noDraggable) {
	  if (Prototype.Browser.IE) {
		  //IE6 does not allow to click on anything in the poup if the overlay is also added.
		  this.showOverlay = true;
	  } else {
		  this.showOverlay = !noOverlay;
	  }
	  this.createOverlay();
	  this.dialog_box = $(id);
	  this.dialog_box.show = this.show.bind(this);
	  this.dialog_box.persistent_show = this.persistent_show.bind(this);
	  this.dialog_box.hide = this.hide.bind(this);
	  this.dialog_box.makeVisible = this.makeVisible.bind(this);
	  this.dialog_box.makeInvisible = this.makeInvisible.bind(this);
	
	  this.dialog_box.style.zIndex = this.overlay.style.zIndex + 1;
	  if (!noDraggable) {
		  new Draggable(this.dialog_box);
	  }
	  this.backgroundHide = true;
	  this.toolTipMode = false;
	},	
	createOverlay: function() {
	  if($('dialog_overlay')) {
	    this.overlay = $('dialog_overlay');
	  } else {
	    this.overlay = document.createElement('div');
	    this.overlay.id = 'dialog_overlay';
	    Object.extend(this.overlay.style, {
	    	position: 'absolute',
	    	top: 0,
	    	left: 0,
	    	zIndex: 90,
	    	width: '100%',
	    	backgroundColor: '#000',
	    	display: 'none'
	    });
	    if (this.showOverlay) {
	    	document.body.insertBefore(this.overlay, document.body.childNodes[0]);
	    }
	  }
	},
	moveDialogBox: function(where) {
	  Element.remove(this.dialog_box);
	  if(where == 'back')
	    this.dialog_box = this.parent_element.appendChild(this.dialog_box);
	  else {
		  if (this.showOverlay) {
			  this.dialog_box = this.overlay.parentNode.insertBefore(this.dialog_box, this.overlay);
		  }
	  }
	},
	show: function(iehack) {	  
	  if (this.toolTipMode) {
		  this.showOverlay = false;
	  }
	  
	  //this removes the actual to be displayed element from the dom and attaches it at the end. That way, it will be in front of all other divs.
	  //and even the clicking in IE will work.
	  $(this.dialog_box).remove();
	  document.body.appendChild(this.dialog_box);
	
	  var top = 0;
	  var left = 0;
	  var popupDims = Element.getDimensions(this.dialog_box);
	  
	  
	  var arrayPageSize = this.getPageSize();
	  
	  this.overlay.style.width = arrayPageSize[0]+'px';
	  this.overlay.style.height = arrayPageSize[1]+'px';
	  if (this.backgroundHide) {
		  this.overlay.onclick = this.hide.bind(this);
	  }
	  
	  this.parent_element = this.dialog_box.parentNode;
		
  	  if (!this.toolTipMode) {
		  var b_dims = Element.getDimensions(this.overlay);
		  if (b_dims.width > 0) {
			  //the overlay has the correct size
			  left = ((b_dims.width/2) - (popupDims.width/2));
		  } else {
			  //the overlay has an invalid size so we use the pageSize again
			  left = ((arrayPageSize[0]/2) - (popupDims.width/2));
		  }
  	  } else {
  		  left = tempX + 25;
  		  // Check if there is enough room right of the mouse pointer to show the tooltip. If not, show it on the left
  		  if (left + popupDims.width > arrayPageSize[0]) {
  			  left = tempX - popupDims.width - 25;
  		  }
  	  }
	  
	  //show the dialog a bit above the center of the screen
	  //IE fails in displaying the dialog box in a fixed position...
	  if (Prototype.Browser.IE) {
	  	  
	  	  var arrayPageScroll = document.viewport.getScrollOffsets();
	  	  
	  	  if (iehack) {
	  		  //IE does not manage to return the correct mouse coordinates once the mouse
	  		  //moved on top of the div. With this line it works, however...
	  		  var e = window.event;
	  		  tempX = Event.pointerX(e);
	  	  }
	  	  
	  	  //IE6 displays the popup to high.... 
	  	  if (Prototype.Browser.IE6) {
	  		  if (!this.toolTipMode) {
	  			  top = arrayPageScroll[1] + (document.viewport.getHeight() / 3) + (popupDims.height/2);
	  		  } else {
	  			  //IE needs to position the popup with reference to the start of the page
	  			  //we need some pixels between the tooltip and the mouse the make it move right.
	  			  top = arrayPageScroll[1] + tempY - (popupDims.height*1.5);
	  		  }
	  	  } else {
	  		  
	  		  if (!this.toolTipMode) {
	  			  top = arrayPageScroll[1] + (document.viewport.getHeight() / 3) - (popupDims.height/2);
	  		  } else {
	  			  //IE needs to position the popup with reference to the start of the page
	  			  //we need some pixels between the tooltip and the mouse the make it move right.
	  			  top = arrayPageScroll[1] + tempY - (popupDims.height/2) - 25;
	  		  }
	  	  }
	  	  //Hack for circumventing the IE positioning of the play now popup which needs a different "relative" positioning frame (this was needed before the readding to the DOM) 
	  	  //if (this.dialog_box.identify() == 'sg_prop_game') {
	  		//this.dialog_box.style.left = popupDims.width/-4 + 'px';
	  	  //}
	  	  //alert('left: ' + this.dialog_box.style.left);
	  } else {
	  	  
		  if (!this.toolTipMode) {
			  //var arrayPageScroll = document.viewport.getScrollOffsets();
			  //Other browsers align the fixed relative on the current view. So we do not need to regard the scroll position
		  	  top = (document.viewport.getHeight() / 3) - (popupDims.height/2);
		  } else {
			  //tooltip mode. the top and left need to be adjusted w.r.t. the mouse position
			  //the mouse position is in absolute coordinates from the top left of the page. Regardless of the scroll position...
			  top = tempY - (popupDims.height/2) - 25;
		  } 
	  }
		  
	  if (Prototype.Browser.IE) {
		  this.dialog_box.style.position = "absolute";
	  } else {
		  this.dialog_box.style.position = "fixed";
	  }
		  
	  //position the dialog
	  this.dialog_box.style.top = top + 'px';
	  this.dialog_box.style.left = left + 'px';
	  
	  if (this.showOverlay) {
		  this.overlay.style.display = 'block';
		  //new Effect.Appear(this.overlay, {duration: 0.0, from: 0.3, to: 0.3});
		  $(this.overlay.setOpacity(0.3));
	  }
	  this.dialog_box.style.display = 'block';
	  this.dialog_box.style.visibility = 'visible';
	  //Is das hier nötig für IE 6???
	  //this.dialog_box.style.left = '0px';
	  //var popupDims = Element.getDimensions(this.dialog_box);
	  //this.dialog_box.style.left = ((this.getPageSize()[0]/2) - (popupDims.width)/2) + 'px';
		
	},
	
	persistent_show: function() {
	   var arrayPageSize = this.getPageSize();
	  
	  this.overlay.style.width = arrayPageSize[0]+'px';
	  this.overlay.style.height = arrayPageSize[1]+'px';
	  this.moveDialogBox('out');
	
	  this.selectBoxes('hide');
	  if (this.showOverlay) {
		  this.overlay.style.display = 'block';
		  //new Effect.Appear(this.overlay, {duration: 0.1, from: 0.0, to: 0.3});
	  }
	  
	  this.dialog_box.style.display = '';
		this.dialog_box.style.left = '0px';
	  var popupDims = Element.getDimensions(this.dialog_box);
		this.dialog_box.style.left = ((this.getPageSize[0]/2) - (popupDims.width)/2) + 'px';
		
	},
	hide: function() {
		if (this.showOverlay) {
			this.overlay.style.display = 'none';
			//new Effect.Fade(this.overlay, {duration: 0.1});
		}
		this.dialog_box.style.visibility = 'hidden';
		$A(this.dialog_box.getElementsByTagName('input')).each(function(e){if(e.type!='submit')e.value=''});
	},
	/* invisible does not necessarily center correct if shown again but it keeps content like applets intact in IE */
	makeInvisible: function() {
		if (this.showOverlay) {
			this.overlay.style.display = 'none';
			/*new Effect.Opacity(
					this.overlay, { 
						from: 0.3, 
						to: 0.0,
						duration: 0.1
					}
			);*/
		}
		this.overlay.style.visibility = 'hidden';
		this.dialog_box.style.visibility = 'hidden';
	},
	makeVisible: function() {
		if (this.showOverlay) {
			this.overlay.style.visibility = 'visible';
			this.overlay.style.display = 'block';
			/*new Effect.Opacity(
					this.overlay, { 
						from: 0.0, 
						to: 0.3,
						duration: 0.1
					}
			);*/
		}
		this.dialog_box.style.visibility = 'visible';
	},

	/*selectBoxes: function(what) {
	  $A(document.getElementsByTagName('select')).each(function(select) {
	    Element[what](select);
	  });
	
	  if(what == 'hide')
	    $A(this.dialog_box.getElementsByTagName('select')).each(function(select){Element.show(select)})
	},*/
   /** 
    *  Cross-browser compatible function to get pixel size of displayed HTML. 
    *  From lightbox image gallery
    *  @return array[0] = width, array[1] = height
    */
	getPageSize: function() {
	   
	        
	     var xScroll, yScroll;
		
		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = window.innerWidth + window.scrollMaxX;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}
		
		var windowWidth, windowHeight;
		
		if (self.innerHeight) {	// all except Explorer
			if(document.documentElement.clientWidth){
				windowWidth = document.documentElement.clientWidth; 
			} else {
				windowWidth = self.innerWidth;
			}
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}	
		
		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else { 
			pageHeight = yScroll;
		}
	
		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){	
			pageWidth = xScroll;		
		} else {
			pageWidth = windowWidth;
		}
	
		return [pageWidth,pageHeight];
	},
	/**
	 * If set to false, the popup cannot be closed with a click outside in the background.
	 */
	setBackgroundHide: function (val) {
		this.backgroundHide = val;
	},
	/**
	 * This method sets the dialog window to tooltip mode.
	 * I.e. the position of the window is dependent on the mouse position and moves when the mouse moves over the object that 
	 * triggered the tooltip.
	 * It also registers itself on the popup as mousemove listener in order to reposition it correctly when
	 * quick mouse movements get the mouse above that popup. 
	 */
	setToolTipMode: function (val) {
		this.toolTipMode = val;
		if (diaShowSelf === undefined) {
			var diaShowSelf = this;
		}
		//Event.observe(this.dialog_box, 'mousemove', function() { diaShowSelf.show(); });
	}
});

Prototype.Browser.IE6 = Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 6;
Prototype.Browser.IE7 = Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 7;
Prototype.Browser.IE8 = Prototype.Browser.IE && !Prototype.Browser.IE6 && !Prototype.Browser.IE7;