/*
	The media loader delegate gets run at load 
	All all items in the mediaLinks array will load the contentString directly into the page as is. 
	You mainipulate the array directly or use the add medi link method
	See the sample below
*/
var MediaLoaderDelegate = {
	mediaLinks: [
/*  SAMPLE OBJECT
	{
		'selector': [string - the  CSS selector of the item that will responrd to the click],
		'contentString': [string - the string that will be written directly into the page],
		'width' : [int - the width of the content block], 
		'height' : [int - the width of the content block]
	}
*/	
	],
	addMediaLink: function (selector, contentString, width, height) {
		this.mediaLinks.push({'selector': selector, 'contentString': contentString, 'width': width, 'height': height});
	},
	initialize : function () {
		for (var i=0,l=this.mediaLinks.length;i<l;i++) {
			ml = this.mediaLinks[i];
			var lks = $$(ml.selector);
			for (var j=0,l2=lks.length; j<l2; j++) {
				lks[j].addEvent('click', this.doMediaLoader.bindAsEventListener(this,[ml]));
			}
		}
	},
	doMediaLoader : function(e, ml) {
// ths prevents any default behavior
		e = new Event(e).stop();
		new MediaLoader(ml.contentString, ml.width, ml.height);
	}
};
var MediaLoader = new Class({
	initialize : function (interiorContentString, frameWidth, frameHeight) {
// There are problems with 'wmode' attributes in the strings - this removes that 
		interiorContentString = interiorContentString.replace('wmode="transparent"', ' ').replace('name="wmode" value="transparent"', ' ');
	
		var bod = $$('body')[0];
		this.shade = new Element('div');
		var docCoords = bod.getSize();
		var winCoords = window.getSize();
		
		var h = (docCoords.scrollSize.y > winCoords.scrollSize.y)? docCoords.scrollSize.y : winCoords.scrollSize.y;
		var w = (docCoords.scrollSize.x > winCoords.scrollSize.x)? docCoords.scrollSize.x : winCoords.scrollSize.x;
		
		var top = winCoords.scroll.y + (.5 * (winCoords.size.y - frameHeight));
		var left = winCoords.scroll.x + (.5 * (winCoords.size.x - frameWidth));
// here is the background shade
		this.shade = new Element('div');
		bod.adopt(this.shade);
		this.shade.setStyles({'position': 'absolute', 'top': 0, 'left': 0, 'z-index': 100, 'width': '100%', 'height': h + 'px', 'background' : '#333', 'opacity': 0.60});
// close the frame when the shadow is clicked		
		this.shade.addEvent('click', this.closeWindow.bind(this));
// here is the content frame
		this.contentFrame = new Element('div');
		bod.adopt(this.contentFrame);
		this.contentFrame.setStyles({'position': 'absolute', 'top': top+'px', 'left': left - 15 +'px', 'z-index' : 300, 'width': frameWidth + 'px', 'height': frameHeight + 'px', 'padding' : '0 15px 15px 15px', 'background': '#333'});
// here is the close button
		this.closeButton = new Element('div');
		this.closeButton.addEvent('click', this.closeWindow.bind(this));
		this.closeButton.setStyles({'position': 'absolute', 'top': (top - 25)+'px', 'left': left - 15 +'px', 'z-index' : 200, 'width': frameWidth + 'px', 'height': '15px',  'text-align': 'right', 'background': '#333', 'color': '#fff', 'padding' : '7px 15px'});
		this.closeButton.setHTML('CLOSE');
		bod.adopt(this.closeButton);

		this.contentFrame.setHTML(interiorContentString);
	},
	closeWindow: function () {
// removes all items from memory
		this.shade.remove();
		this.contentFrame.remove();
		this.closeButton.remove();
	}
	
});


/*

SAMPLE USAGE

<div class="teaser">
	<div class="teaser_image">
		<a href="#" class="videoLaunch_0"><img src="images/teaserSample1.jpg" alt="" /></a>
	</div>
	<div class="teaser_text">
		<h3 class="teaser_headline videoLaunch_0"><a href="#">Total Hip Replacement Procedure</a></h3>
		<p><span class="videoLink">Video</span></p>
	</div>
	<div class="clearer">&nbsp;</div>
</div>
<script type="text/javaScript"> // ^--goes with that
	MediaLoaderDelegate.addMediaLink('.videoLaunch_0','<embed src="http://www.youtube.com/v/lKnPmL161Jo&hl=en" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>', 425, 355);
</script>

*/