/*
Script: IframeShim.js
Iframe shim class for hiding elements below a floating DOM element.

Dependancies:
	 mootools - <Moo.js>, <Utility.js>, <Common.js>, <String.js>, <Array.js>, <Function.js>, <Element.js>, <Dom.js>

Author:
	Aaron Newton, <aaron [dot] newton [at] cnet [dot] com>


Class: IframeShim
		There are two types of elements that (sometimes) prohibit you from 
		positioning a DOM element over them: some form elements and some
		flash elements. The two options you have are:
			- to hide these elements when your dom is going to be over them; 
			this works if you know your DOM element is going to completely
			obscure that element
			
			- an iframe shim - where you put an iframe below your element but
			ABOVE the form/flash element. more details here:
			http://www.macridesweb.com/oltest/IframeShim.html
			
		The IframeShim class handles a lot of the dirty work for you.
Arguments:
			element -  the element you want to put this shim under
			display -  turn it on by default?
			name -  the id you want to give the new DOM element of the iframe shim
			zindex -  the index of the shim; optional, default is 1 less than the element
			margin -  make the iframe smaller than the element to give a buffer (for 
							things like shadows)
			offset -  {top:#, left:#} - move the iframe up/down, left/right relative to 
							the element
		
		then, when you make your floating DOM show up you just execute .hide() or .show()
		to make the shim do it's magic. You can also call .position() if the element the
		shim is supposed to be under happens to move.
		
		example:
		
		> <div id="myFloatingDiv">stuff</div>
		> <script>
		> 	var myFloatingDivShim = new IframeShim({
		> 		element: 'myFloatingDiv',
		> 		display: false,
		> 		name: 'myFloatingDivShimId'
		> 	});
		> 	function showMyFloatingDiv(){
		> 		$('myFloatingDiv').show();
		> 		myFloatingDivShim.show();
		> 	}
		> </script>
		
		See also <hide>, <show>, <position>
	*/
	
var IframeShim = new Class({
	initialize: function (options){
		this.setOptions({}, options);
		el = $(options.element);
		var shim = new Element('iframe');
		this.id = options.name + "_shim";
		shim.id = this.id;
		try{
			if(!$(el).getStyle('z-Index')) $(el).setStyle('z-Index',5);
		}catch(e){
			$(el).setStyle('z-Index',5);
		}
 		shim.setStyles({
			'position': 'absolute',
			'zIndex': ($(el).getStyle('z-Index')-1<1)?4:$(el).getStyle('z-Index')-1,
			'border': 'none',
			'filter': 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'
		});
		shim.setProperties({
			'src':'javascript:void(0);',
			'frameborder':'0',
			'scrolling':'no'
		}).inject(el,'after');
		if(options.display) this.show();
		else this.hide();
		shim = null;
	},

/*	
		Property: position
		This will reposition the iframe element. Call this when you move or resize
		the iframe element.
	*/
	position: function(shim){
		shim = shim || this.id;
		var el = this.options.element;
		var wasVis = $(el).getStyle('display')!='none';
		if(! wasVis) $(el).setStyle('display','block');
		this.left = $(el).getLeft();
		this.top = $(el).getTop();
		this.width = $(el).offsetWidth;
		this.height = $(el).offsetHeight;
		if(! wasVis) $(el).setStyle('display','none');
		if($type(this.options.margin)){
			this.width = this.width-(this.options.margin*2);
			this.height = this.height-(this.options.margin*2);
			this.left = this.left + this.options.margin;
			this.top = this.top + this.options.margin;
		}
		if($type(this.options.offset)){
			this.left = this.left-this.options.offset.left;
			this.top = this.top-this.options.offset.top;
		}
 		$(shim).setStyles({
			'left': this.left + 'px',
			'width': this.width + 'px',
			'height': this.height + 'px',
			'top': this.top + 'px'
		});
	},
/*	
		Property: hide
		This will hide the IframeShim object. If you don't call this when you
		hide the element that's over the flash or select list, then that thing
		will still be hidden.
	*/
	hide: function(){
		$(this.id).setStyle('display','none');
	},

/*	
		Property: show
		This will obscure any form elements or flash elements below the iframe
		shim element. Call this when you show your floating element.
	*/
	show: function(){
		$(this.id).setStyle('display','block');
		this.position();
	},
/*	
		Property: remove
		This will remove the iframe from the DOM.
	*/
	remove: function(){
		$(this.id).remove();
	}
});
IframeShim.implement(new Options);
//legacy namespace
var iframeShim = IframeShim;
/* do not edit below this line */   
/* Section: Change Log 

$Source: /cvs/main/flatfile/html/rb/js/global/cnet.global.framework/common/browser.fixes/IframeShim.js,v $
$Log: IframeShim.js,v $
Revision 1.5  2007/02/23 20:02:51  newtona
adjusted z-index logic so that the iframe is always a positive number

Revision 1.4  2007/02/23 18:47:29  newtona
iframe target now gets $() around it.

Revision 1.3  2007/02/07 20:49:21  newtona
implemented Options class

Revision 1.2  2007/01/22 21:09:24  newtona
updated docs for namespace change (IframeShim.js)

Revision 1.1  2007/01/22 21:08:30  newtona
renamed from iframeshim.js

Revision 1.3  2007/01/22 19:54:59  newtona
removed browser.sniffer - this stuff is in mootools 1.0
renamed iframeShim to IframeShim

Revision 1.2  2007/01/11 20:45:49  newtona
fixed syntax error with setProperties

Revision 1.1  2007/01/09 02:39:35  newtona
renamed addons directory to "common" directory

Revision 1.3  2007/01/05 19:30:37  newtona
removed any dependencies on cnet libraries; now only depends on mootools.

Revision 1.2  2006/11/02 21:26:42  newtona
checking in commerce release version of global framework.

notable changes here:
cnet.functions.js is the only file really modified, the rest are just getting cvs footers (again).

cnet.functions adds numerous new classes:

$type.isNumber
$type.isSet
$set

*/