//******************************************************************************:collapseFolds=1://
// 	 "HUD"/Edit View Controller: 	Set of javascript fnxns that make doing "heads-up displays"
//									easier.
//	
//			 			Version:	1.0 
//					  	   Date:	Tue Aug 26 2008
//
//				 	  Copyright:	¨2008 PureBlend New Media Design Group <info@pureblend.com>
//
//					   Requires:	Scriptaculous.js / Prototype.js
//
//					 Change log:	Appears at the bottom of this file.
//
//***********************************************************************************************//

function HUDController() {
	//{{{
	//var bodies = document.getElementsByTagName('body');
	//typeof bodies[0].className != undefined && 
	if (!(hud = document.getElementById('myHUDController'))) {
		
		var useBuiltInCloseBox		= false;
		this.isVisible = false;
		var theCanvas 				= document.createElement('div');
		theCanvas.id 				= 'myHUDCanvas';
		theCanvas.className 		= 'HUD_canvas';
		theCanvas.style.display 	= 'none';
		theCanvas.style.position 	= 'absolute';
		theCanvas.style.zIndex 		= 1000;
		this.myCanvas 				= theCanvas;
		
		// Create the DIV that will serve as the visible HUD canvas
		var myHUD 					= document.createElement('div');

		// Set some attributes. Scriptaculous seems to require inline style definition for display
		myHUD.id 				= 'myHUDController';
		myHUD.className 		= 'HUD_controller';
		myHUD.style.display 	= 'none';
		myHUD.style.position 	= 'absolute';
		myHUD.style.zIndex 		= 1001;
		
		// Assign the DIV to one of our members.
		this.hud = myHUD;
		
		
		// This sets an initial drag handle to the hud so that the whole HUD acts as the handle
		// if user calls isDraggable without a Handle attached.
		this.hud.dragHandle = this.hud.id;
		
		this.setOpacity = function (float_number) {
			this.canvasOpacity			= float_number;
			this.myCanvas.style.opacity = float_number;
		}
		
		this.setBackgroundColor = function (hexColor) {
			this.myCanvas.style.backgroundColor = hexColor;
		}
		
		this.setCanvasWidth = function (strWithUnit_or_intPixels) {
			var str_value	= strWithUnit_or_intPixels.toString( );
			if (str_value.indexOf('px') == -1) {
				str_value	= str_value+'px';
			} 
			this.myCanvas.style.width = str_value;
		}
		
		this.setCanvasHeight = function (strWithUnit_or_intPixels) {
			var str_value	= strWithUnit_or_intPixels.toString( );
			if (str_value.indexOf('px') == -1) {
				str_value	= str_value+'px';
			} 
			this.myCanvas.style.height = str_value;
		}
		
		
		this.setWidth = function (strWithUnit_or_intPixels) {
			var str_value	= strWithUnit_or_intPixels.toString( );
			if (str_value.indexOf('px') == -1) {
				str_value	= str_value+'px';
			} 
			this.hud.style.width = str_value;
			hud_controller.resizeHUD();
		}
		
		this.setHeight = function (strWithUnit_or_intPixels) {
			//{{{
			var previousHeight = this.hud.style.height;
			try {
				var pixels	= parseInt(strWithUnit_or_intPixels);
				
				if (this.hudScrollOverflow && pixels > (window.innerHeight-40)) {
					strWithUnit_or_intPixels = (window.innerHeight-60);
					//this.setWidth((parseInt(this.hud.style.width)+16));
					this.hud.style.overflow = 'auto';
				} 
				
			} catch(e) { }
			var str_value	= strWithUnit_or_intPixels.toString( );
			if (str_value.indexOf('px') == -1) {
				str_value	= str_value+'px';
			} 
			this.hud.style.height = str_value;
			hud_controller.resizeHUD();
			//}}}
		}
		
		this.setHudScrollOverflow = function (bool) {
			this.hudScrollOverflow = bool;
		}
		
		this.setAutoSizeCanvas = function (bool) {
			this.autoSize = bool;
			this.resizeHUD();
		}
		
		this.setHudAutoSize = function (bool) {
			this.hudAutoSize = bool;
		}
				
		
		this.getScrollHeight = function() {
			var h = 0;
		
			if (typeof window.pageYOffset != 'undefined') {
				h	= window.pageYOffset;
			} else if (typeof document.documentElement.scrollTop != 'undefined'){
				h	= document.documentElement.scrollTop;
			} else {
				h	= document.body.scrollTop;
			}
			
			
			return h ? h : 0;
		}
		
		this.centerHudOnScreen = function (bool) {
			//{{{
			if (bool) {
				this.centerHUD 			= true;
				var hudWidth 			= parseInt(this.hud.style.width);
				var hudHeight 			= parseInt(this.hud.style.height);
				                    	
				dims 					= this.getWindowDimensions();
				var windowWidth			= dims['windowWidth'];
				var windowHeight		= dims['windowHeight'];
				                    	
				var yScrollAmount		= 0;
				//yScrollAmount			= (document.all ? document.scrollTop : window.pageYOffset);
				yScrollAmount 			= this.getScrollHeight();
				this.hud.style.top		= (((windowHeight - hudHeight) / 2) + yScrollAmount) + 'px';
				this.hud.style.left		= ((windowWidth - hudWidth) / 2) + 'px';
				
				this.myCanvas.style.top	= yScrollAmount + 'px';				
			} else {
				this.centerHUD = false;
			}
			//}}}
		}
		
		this.getWindowDimensions = function () {
			//{{{
			var windowWidth		= 0;
			var windowHeight	= 0;
			
			if (typeof window.innerWidth != 'undefined') {
				windowWidth 		= window.innerWidth;
				windowHeight 		= window.innerHeight;

			} else if (typeof document.documentElement != 'undefined'
						&& typeof document.documentElement.clientWidth != 'undefined' 
						&& document.documentElement.clientWidth != 0) {
				windowWidth 		= document.documentElement.clientWidth;
				windowHeight 		= document.documentElement.clientHeight;

			} else {
				try {
					windowWidth 	= document.getElementsByTagName('body')[0].clientWidth;
					windowHeight 	= document.getElementsByTagName('body')[0].clientHeight;
				} catch(e) { }

			}		
			var dims = new Array();
			dims['windowWidth']		= windowWidth;
			dims['windowHeight']	= windowHeight;
			return dims;
			//}}}
		}
		
		this.resizeHUD = function () {
			//{{{
			if (this.autoSize) {
				dims 				= this.getWindowDimensions();
				var windowWidth		= dims['windowWidth'];
				var windowHeight	= dims['windowHeight'];
				
				this.setCanvasHeight(windowHeight);
				this.setCanvasWidth(windowWidth);
				this.centerHudOnScreen( this.centerHUD );
			}
			//}}}
		}
		
		
		
		
		this.setHudBorderTop = function (int_border) {
			// Set height by establishing a top and bottom border
			this.HUDborder = parseInt(int_border);
			var windowHeight		= window.document.height;
			hud_controller.setHeight( windowHeight - (this.HUDborder * 2) );
		}
		
		
		this.isDraggable = function (bool) {
			//{{{
			if (bool) {
				new Draggable(this.hud,{revert:false,handle:this.hud.dragHandle});
			} else {
				return false;
			}
			//}}}
		}
		
		this.isDraggableWithHandle = function (bool, obj_handle) {
			//{{{
			this.hud.dragHandle = obj_handle; // Can be DOM object or string ID of existing object
			this.hud.dragHandle.style.zIndex = 1002;
			this.isDraggable(bool);
			//}}}
		}
		
		this.close = function () {
			this.setVisible(false);
		}
		
		this.open = function () {
			this.setVisible(true);
			this.addCloseBox( );
		}

		this.setCloseEffect = function (strEffectName) {
			this.closeEffect = strEffectName;
		}
		
		this.setOpenEffect = function (strEffectName) {
			//{{{
			this.openEffectArgs	= '';
			if (arguments[1] != undefined) {
				this.openEffectArgs = arguments[1];
			} 
			this.openEffect = strEffectName;
			//}}}
		}
		
		this.setVisible = function (bool) {
			//{{{
			var theDuration = 1.0;
			if (bool) {
				Effect.BlindDown(this.hud, {duration: 0.3});
				Effect.Appear(this.myCanvas, {duration: theDuration, from: 0.0, to: this.canvasOpacity});
				this.isVisible = true;
			} else {
				Effect.SwitchOff(this.hud, {duration: 0.3});
				Effect.Fade(this.myCanvas, {duration: theDuration, from: this.canvasOpacity, to: 0.0});
				this.isVisible = false;
			}
			
			//}}}
		}
		
		this.appendContent = function (objHTML) {
			this.hud.appendChild(objHTML);
		}
		
		this.removeContent	= function () {
			try {
				while( this.hud.hasChildNodes() ) { this.hud.removeChild( this.hud.lastChild ); }
			} catch(e) { alert('try to remove content failed'); }
		}
		
		this.setContentDOM	= function (objHTML) {
			//{{{
			try{				
				if (this.hudAutoSize && objHTML.clientWidth > 0 && objHTML.clientHeight) {
					this.setWidth( objHTML.clientWidth );
					this.setHeight( objHTML.clientHeight );
				} 
				// get a reference to the drag handle.
				var dragHandle = this.hud.dragHandle;
				// Set content to content of objHTML
				this.removeContent( );
				this.appendContent(objHTML);
				// add back the handle
				//
				if (dragHandle != this.hud.id) {
					this.hud.insertBefore(dragHandle, this.hud.firstChild);
				} 			
			} catch(e) {
				alert('Setting content failed');
			}
			//}}}
		}
		this.setContentHTML	= function (objHTML) {
			this.setContent(objHTML);
		}
		this.setContent	= function (objHTML) {
			//{{{
			try{
				if (this.hudAutoSize && objHTML.clientWidth > 0 && objHTML.clientHeight) {
					this.setWidth( objHTML.clientWidth );
					this.setHeight( objHTML.clientHeight );
				} 
				// get a reference to the drag handle.
				var dragHandle = this.hud.dragHandle;
				// Set content to content of objHTML
				this.hud.innerHTML = objHTML.innerHTML;
				// add back the handle
				if (dragHandle != this.hud.id) {
					this.hud.insertBefore(dragHandle, this.hud.firstChild);
				} 
			} catch(e) {
				alert('Setting content failed');
			}
			//}}}
		}
		
		this.completeOpen = function () {
			//{{{
			this.centerHudOnScreen(true);
			Effect.Appear(this.hud, {duration: 0.2, from: 0.0, to: 1.0});
			//}}}
		}
		
		this.replaceContent = function (objHTML, width, height) {
			//{{{
			try{
				Effect.Fade(this.hud, {duration: 0.2, from: 1.0, to: 0.0});
				var str;
				this.temp_content = eval(objHTML);

				str	=  'hud_controller.setContentDOM(hud_controller.temp_content);';
				str	+= 'hud_controller.setWidth('+width+');';
				str	+= 'hud_controller.setHeight('+height+');';
				str	+= 'hud_controller.completeOpen();';
				
				setTimeout(str, 210);
				
			} catch(e) { 
				this.setWidth(width);
				this.setHeight(height);
				this.setContentDOM(objHTML);
			}
			//}}}
		}
		
		this.hasCloseBox = function (bool) {
			if (bool) {
				this.useBuiltInCloseBox = false;
				
			} else {
				this.useBuiltInCloseBox = true;
			}
		}
		
		this.addCloseBox = function () {
			if (this.useBuiltInCloseBox) {
				
				var closeBoxLnk					= document.createElement('a');
				
				//closeBoxLnk.href				= 'javascript:void(0)';
				closeBoxLnk.href				= 'javascript:top.onHUDClose();';
				
				
				var closeBoxImg					= document.createElement('img');
				closeBoxImg.src					= '/neujavascript/common/closebox.png';
				closeBoxImg.width				= 20;
				closeBoxImg.height				= 20;
				closeBoxImg.border				= 0;
				closeBoxImg.alt					= 'Click this to close';
				closeBoxImg.style.position		= 'absolute';
				closeBoxImg.style.top			= (parseInt(this.hud.style.top)-20)+'px';
				closeBoxImg.style.left			= (parseInt(this.hud.style.left)-20)+'px';
				//this.setContentDOM(closeBoxImg);
				closeBoxLnk.appendChild(closeBoxImg);
				this.myCanvas.appendChild(closeBoxLnk);
			} 
		}
		
	} else {
		return false;
	}
	//}}}
}

// There are two components to the HUD, the "Canvas", which is the background,
// typically to the window edges. And the "hud" which is the container for your 
// content. Usually you make the opacity of the Canvas less than 1.0 and keep
// the hud's opacity at 1.0, otherwise your content will inherit the opacity and
// you end up with see-through objects.

// Push content into the hud by calling hud_controller.setContent(content) with your
// content as the single argument in the form of a dom element (doc.getElementById()).
// The content container is NOT passed into the hud, so if you have a table, you need
// to surround it in a div or span element and pass that element in.
//
// Open and close the hud by calling hud_controller.open() and hud_controller.close()

// Catches window resize events
function catchResize() {
	hud_controller.resizeHUD();
}
function catchScroll() {
	hud_controller.resizeHUD();
}
// Creating instance of the HUDController, then setting some default properties
var hud_controller	= new HUDController();

hud_controller.setWidth( 900 );
hud_controller.setHeight( 701 );

hud_controller.setBackgroundColor( '#000' );
hud_controller.setOpacity( 0.55 );

hud_controller.setAutoSizeCanvas( true );
hud_controller.centerHudOnScreen( true );

//hud_controller.isDraggable( true );
//hud_controller.isDraggableWithHandle( true,  hud_controller.hud.appendChild($('theHandle')) );

// PROPERTIES
// This is how you can directly access properties of the canvas
//hud_controller.myCanvas.style.backgroundColor 	= '#000';

// This is how you can access properties of the HUD
hud_controller.hud.style.backgroundColor 	= '#fff';

// Add the canvas (background) and the HUD to the document

hud_controller.myCanvas.style.display 		= 'none';
hud_controller.myCanvas.style.position 		= 'absolute';
hud_controller.myCanvas.style.top 			= '0px';
hud_controller.hud.style.display 			= 'none';

addEvent(window, 'load', function() { var theBody = document.getElementsByTagName('body');$(theBody[0].id).appendChild(hud_controller.myCanvas); $(theBody[0].id).appendChild(hud_controller.hud); });


// Catch window resize events, send them to catchResize() 
addEvent(window, 'resize', catchResize);
//if (navigator.userAgent.indexOf('Safari') == -1) { 
	// Safari fired continuous scroll events, so don't bother attaching to scroll.
	addEvent(window, 'scroll', catchScroll);
//} 


// Externally sourced script to determine document size:
/*
	Lightbox JS: Fullsize Image Overlays 
	by Lokesh Dhakar - http://www.huddletogether.com

	For more information on this script, visit:
	http://huddletogether.com/projects/lightbox/

	Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
	(basically, do anything you want, just leave my name and link)
*/
//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){
	//{{{
	return;
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		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
		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 = windowWidth;
	} else {
		pageWidth = xScroll;
	}


	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
	//}}}
}