document.observe("dom:loaded", function() {	
	/***********************************************************************************************
	To function properly, we need to have links with rel=lightlink, and div's with a class 
	of lightlink. We then have a class of "ll-1, ll-2, ll-3" on our links corresponding to classes
	on our divs. So, <a class="ll-1" rel="lightlink" />, when clicked, would open 
	<div class="lightlink 11-1" />
	***********************************************************************************************/
	
	// Grab full page height
	var bHeight = (($('innerWrapper').getHeight() * 1) + 100) + "px";
	
	//Set up Fader and lightlink elements
	var fader = new Element('div', {id: 'fadeOut'});
	fader.setStyle({height: bHeight, display: 'none'});
	$$('body')[0].insert({ top: fader });
	var lightlink = $$('div.lightlink');
	
	//Center lightlink
	var llwidth = ""; 
	lightlink.each(function(elem) {
		llwidth = "-" + (elem.getWidth() / 2) + "px";
		elem.setStyle({marginLeft: llwidth});
		elem.insert("<hr><span style='clear:both'><a class='llclose'>Close This Window</a></span>");
	});
	
	$$('a[rel="lightlink"]').each(function(elem) {
		var id = elem.classNames().inspect();
		id = id.match(/[\d\.]+/g);
		elem.show();
		elem.observe('click', function(){
			//Temporary code... Tracking to see if youtube vid loaded. This relies on this only being used on the product page.
			pageTracker._trackEvent('Videos', 'Video Popup', 'Popup Loaded');
			var image = new Image();
			image.src = "http://www.youtube.com/favicon.ico";
			image.onload = function(){
				pageTracker._trackEvent('Videos', 'Video Popup', 'Video Loaded');
			};
			image.onerror = function(){
				pageTracker._trackEvent('Videos', 'Video Popup', 'Video Blocked');
			};

			fader.show();
			$$('body')[0].insert({
				top: $$('div.ll-' + id)[0]
			});
			fader.observe('click', function(){
				fader.hide();
				$$('div.ll-' + id)[0].setStyle({display: 'none'});
			});
			$$('a.llclose')[0].observe('click', function() {
				fader.hide();
				$$('div.ll-' + id)[0].setStyle({display: 'none'});
			});
			$$('div.ll-' + id)[0].setStyle({display: 'block'});
			
		});
	});
	
});