/*
    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 respond 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': 4000, 'width': '100%', 'height': h + 'px', 'background' : '#333', 'opacity': 0.30});
// 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' : 5000, '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('click outside to 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>

*/