/* GreyBox
 * Uses Prototype and Scriptaculous
 * Needs CSS for greybox, greybox_background, and greybox_main_background (greybox_close optional)
 * Serisys Solutions
 * */
 
// when linkSelector(css selector) links are clicked, if they have target 'greybox' and are images, they will
// Open in greybox
	//linkSelector: CSS selector for the 'a' references to change
	//mainboxId: the subdiv that The link data will replace
	//backgroundId: the background (usually faded grey) that will appear when an entry is selected
	//mainbackgroundId: the main transparent placement element that the mainbox is placed on
	// closeId: the element that will trigger the close event when the link appears
var greybox=function(linkSelector,mainboxId,backgroundId,mainbackgroundId,closeId){
	// lists are entries that could possibly have lists.
	
	//link selector (CSS) must select links ('a' references)
	var greyboxLinks;
	if(linkSelector ==null || linkSelector=='') {
	greyboxLInks=$$('a');
	} else {
	greyboxLinks= $$(linkSelector);
	}
	 
		
	var background = $(backgroundId);
	var backgroundCurrentOpacity;
	var childrenData = new Array();
	if(background==null) {
			// if no background, then create default.
			background = new Element('div',
				{	'class': 'greybox_background',
					'id':backgroundId
				});
				$(document.body).insert(background);
				backgroundDefaultOpacity = background.getStyle('opacity');
				background.setStyle(
					{left:'0',
					top:'0',
					width:'100%',
					position:'fixed',
					height:'100%',
					backgroundColor:'#000',
					margin: '0px'
					});
	
	}
	var mainBackground = $(mainbackgroundId);
	if(mainBackground==null){
		mainBackground = new Element('div',
				{	'class': 'greybox_main_background',
					'id':mainbackgroundId
				});
			
				$(document.body).insert(mainBackground);
	}
	var mainBox = $(mainboxId);
	if(mainBox==null) {
		mainBox = new Element('div',
			{	'class': 'greybox',
				'id':mainboxId
		});
		
		mainBackground.insert(mainBox);
		mainBox.setStyle( {
		backgroundColor:'transparent',
		textAlign:'center',
		marginLeft:'auto',
		marginRight:'auto',
			});
	}
	var children = new Array();
	var closeElement = $(closeId);
	if(closeElement!=null) {
	 //do nothing
	}else if ( closeId!=null && closeId!='') {
		closeElement = new Element('div',
			{	'class': 'greybox_close',
				'id':mainboxId
		});
		
		mainBackground.insert(closeElement);
	}else {
		closeElement=mainBackground;
	}
					
	// Go through links that are selected, and 
	greyboxLinks.each ( function(greyboxLink) {
	var newImg;
		if(greyboxLink.hasAttribute('target') && greyboxLink.target=="greybox" && greyboxLink.hasAttribute('href')) {
			//save pertinent data in array for loading on click
			//TODO: modify to allow fir types other than image
			childrenData[greyboxLink.identify()]= new Array();
			childrenData[greyboxLink.identify()]['class']='greybox_content';
			childrenData[greyboxLink.identify()]['type']='img'
			childrenData[greyboxLink.identify()]['src']=greyboxLink.href;
			
			//change link and href so that link is not followed.
			greyboxLink.writeAttribute('target','');
			greyboxLink.writeAttribute('href','#'+greyboxLink.href);
			
		}
			greyboxLink.observe('click',
				function() {
				
					//if image not loaded yet, load on first link click
					if(children[greyboxLink.identify()]==null) {
						children[greyboxLink.identify()] = new Element(childrenData[greyboxLink.identify()]['type'], {'class': childrenData[greyboxLink.identify()]['class'], src: childrenData[greyboxLink.identify()]['src']});
						mainBox.insert(children[greyboxLink.identify()]);
						children.push(children[greyboxLink.identify()]);
						children[greyboxLink.identify()].show();
					} else {
						children[greyboxLink.identify()].show();
					}
					var backEffect = new Effect.Appear(background,
					{
						duration:0.2,
						to:backgroundDefaultOpacity,
						queue:{position:'end', scope:background.identify()+'scope'}
					});
					var curEffect = new Effect.Appear(mainBackground,
					{
						duration:0.2,
						queue:{position:'end', scope:mainBackground.identify()+'scope'}
					});
				}
			);
	});
	
		
			closeElement.observe('click',
				function() {
					var backEffect = new Effect.Fade(background,
						{
							duration:0.2,
							queue:{position:'end', scope:background.identify()+'scope'}
						});
					var curEffect = new Effect.Fade(mainBackground, {
						duration:0.2,
						queue:{position:'end', scope:mainBackground.identify()+'scope'},
						afterFinish: function () {
							children.each( function(curChild) {
								curChild.hide();
							});
						
						}
					});
				}
			);

			//child.hide();
			children.each(function(curChild) {
				curChild.hide();
			});
			mainBackground.hide();
			background.hide();
		
		
};