/*
 * Lightbox.js
 * 
 * Controls lightbox functionality and contains functions for creating lightbox content
 *
 */

//create lightbox class
var Lightbox = new Class({
	'top_offset': 30,
	'fadetime': 270,	//time in milliseconds to fade in or out a lightbox
	
	//called when the lightbox class is instantiated
	'initialize': function(){
		var lightbox = this;
		lightbox.locked = false;
	
		//create lightbox objects
		lightbox.dim = new Element('div', {'id': 'dim'});
		lightbox.lb = new Element('div', {'id': 'lightbox'});
		lightbox.content = new Element('div', {'id': 'lightbox_content'});
		
		lightbox.close = new Element('div', {'id': 'lightbox_close', 'events': {'click': function(){ lightbox.hide(); }}}).grab(
			new Element('img', {'src': baseUrl + 'images/lightbox_close.png'}).setStyles({'width': 66, 'height': 17})
		);
		
		lightbox.spacer = {
			'top': new Element('div', {'class': 'lightbox_spacer'}),
			'bottom': new Element('div', {'class': 'lightbox_spacer'})
		};	
		
		//construct the lightbox, including rounded corners and close button
		lightbox.lb.adopt(
			new Element('div', {'id': 'lightbox_border_top', 'class': 'lightbox_border'}).adopt(
				new Element('div', {'class': 'lightbox_corner_nw lightbox_corner'}),
				lightbox.spacer.top,
				new Element('div', {'class': 'lightbox_corner_ne lightbox_corner'}),
				lightbox.close
			),
			lightbox.content,
			new Element('div', {'id': 'lightbox_border_bottom', 'class': 'lightbox_border'}).adopt(
				new Element('div', {'class': 'lightbox_corner_sw lightbox_corner'}),
				lightbox.spacer.bottom,
				new Element('div', {'class': 'lightbox_corner_se lightbox_corner'})
			)
		);
		
		//add an event to the window so that the lightbox and dimmer are repositioned to account for changes in window size
		window.addEvents({
			'resize': function(){
				lightbox.dim.setStyles({
					'width': window.getSize().x,
					'height': window.getScrollSize().y
				});
				
				lightbox.setCenter();
			},
		
			'scroll': function(){
				lightbox.setCenter();
			}
		});
		
		//inject the dimmer and lightbox into the dom
		$(document.body).grab(lightbox.dim);
		$(document.body).grab(lightbox.lb);
	},
	
	'setCenter': function(){
		this.lb.morph({
			'left': (window.getSize().x - this.lb.getSize().x) / 2,
			'top': this.top_offset + window.getScroll().y
		});
	},
	
	'setup': function(data){
		this.lb.setStyles(data.lb);
		
		if ($chk(data.spacer)){
			this.setSpacer(data.spacer.width);
		}
		else {
			var width_int = data.lb.width.toInt();
			if (width_int){
				this.setSpacer(width_int + 44);	
			}
		}
		
		if ($chk(data.close)){
			this.close.setStyles(data.close);
		}
	},
	
	'setSpacer': function(data){
		this.spacer.top.setStyle('width', data);
		this.spacer.bottom.setStyle('width', data);
	},

	//sets up the lightbox content so that it can be shown
	'show': function(args){
		if ( ! this.locked){
			this.locked=true;
			
			//empty any old lightbox content still in the lightbox
			this.content.empty();
			
			//choose the model to populate the lightbox with
			if (args.mode.substring(0,6) == 'upload'){
				this['upload']();
			}
			else if (args.mode.substring(0,6) == 'voting'){
				this['voting']();
			}
			else if (args.mode.substring(0,5) == 'login'){
				this['login']();
			}
			else if (args.mode.substring(0,8) == 'register'){
				this['signup']();
			}
			else {
				this[args.mode](args.data);
			}
		}
	},
	
	//does the actual showing of the lightbox
	'update_lb': function(el, foc){
		this.content.grab(el);
		
		//set the dimmer to fill the screen, show itself, and have transparency
		this.dim.setStyles({
			'width': window.getScrollSize().x,
			'height': window.getScrollSize().y,
			'display': 'block',
			'opacity': .7
		});
		
		//set the lightbox to be centered horizontally, a set amount down the screen vertically, and transparent
		this.lb.setStyles({
			'left': (window.getSize().x - this.lb.getSize().x) / 2,
			'top': this.top_offset + window.getScroll().y,
			'opacity': 0,
			'visibility': 'visible'
		});
		
		//fade in the lightbox and unlock it for future animation
		new Fx.Tween(this.lb, {'duration': this.fadetime}).start('opacity', '1').chain(function(){lb.locked = false;});
		
		if ($chk(foc)){
			foc.focus();
		}
	},

	//hide the lightbox
	'hide': function(){
		if ( ! this.locked){
			var lightbox = this;
			this.locked = true;

			//fade out the lightbox, hide the dimmer, and unlock animations
			new Fx.Tween(this.lb, {'duration': this.fadetime}).start('opacity', '0').chain(function(){lightbox.locked = false;});	
			this.dim.setStyle('display', 'none');
		}
	},
	
	//set up close buttons
	'close_button': function(){
		$$('.close_button').addEvent('click', function(){
			lb.hide();
		});
	},
	

	/*
	 *
	 *=-=-=-=-=- Lightbox Model Functions -=-=-=-=-=
	 *
	 */
	 
	
	/*=-=-=-=-=- Preview Lightbox -=-=-=-=-=*/

	'preview': function(data){
		this.setup({
			'lb': { 'width': 'auto', 'height': 'auto', 'padding': '12px 20px' },
			'close': { 'top': 3, 'right': 3 }
		});
		
		var el = new Element('img');
		var im = new Image();
		
		//set up an event for when the image finishes loading
		im.onload = function(){
			
			//populate the lightbox with the loaded image and resize the image to the correct dimensions
			el.set('src', im.src).setStyles({
				'width': im.width,
				'height': im.height
			});

			//show the lightbox
			lb.update_lb(el);			
			lb.setSpacer(lb.lb.getSize().x - 16);
			
			//hide the loading message
			if ( ! $chk(data.no_rebuild) && $chk(ft)){
				ft.mode.locked = false;
				ft.set_loading();
			}
		}

		//turn on the loading message if necessary
		if ( ! $chk(data.no_rebuild) && $chk(ft)){
			ft.mode.locked = true;
			ft.set_loading();
		}		
		
		//load the right preview image based on if the image needs to be built or not
		if ($chk(data.no_rebuild)){
			im.src = baseUrl + 'request/image/' + data.log_id + '/preview_save/' + new Date().getTime();
		}
		else {
			im.src = baseUrl + 'request/compile_image/' + data.log_id + '/preview/' + new Date().getTime();
		}
	},
	
	
	/*=-=-=-=-=- Save Lightbox -=-=-=-=-=*/

	'save_process': function(data){
		this.setup({
			'lb': { 'width': 678, 'height': 'auto', 'min-height': 0, 'padding': '22px 30px' },
			'close': { 'top': 8, 'right': 8 }
		});
		
		var el = new Element('div', {'id': 'save_lb'});
		$(document.body).grab(el);
		
		//ajax request to save the image in memory, or request registration/login if necessary
		new Request.HTML({
			'url':baseUrl + 'request/save_lb',
			'update': 'save_lb',
			'onComplete': function(){
				lb.save_setup();
				lb.close_button();
				lb.update_lb(el, $('save_name'));
			}
		}).send();
	},

	'save_setup': function(){
		
		if($('save_row')){
			var save_proc = function(){
				//validate the save name if necessary and call the save function 
				var name = $('save_name').get('value');
				if( ! name.length){
					name = 'Untitled';
				}
				ft.save({'step': 2, 'name': name});
				
				//wait for the save to finish and update the lightbox
				lb.lb.addEvent('saveFinished', function(){
					$('save_lb').empty().adopt(
						new Element('h1', {'text': 'Save Your Fracture'}),
						new Element('p', {'html': 'Your Fracture has been saved and added to your <a href="' + baseUrl +'my_fractures">"My Fractures"</a> page.'})
					)
				});
			}
			
			//save button is clicked
			$('save_button').addEvent('click', function(){
				save_proc();
			});
			
			if($('save_name')){
				$('save_name').addEvent('keydown', function(e){
					if(e.key == 'enter'){
						save_proc();
					}
				});
			}
		}
		else {
			//set up links that show the correct form based on if the user wants to login or register
			$$('.signup_link').addEvent('click', function(){
				$('signup_row').setStyle('display', 'block');
				$('login_row').setStyle('display', 'none');
				$('signup_email').focus();
			});

			$$('.login_link').addEvent('click', function(){
				$('signup_row').setStyle('display', 'none');
				$('login_row').setStyle('display', 'block');
				$('login_email').focus();
			});			
			
			lb.login_setup('editor');
			lb.signup_setup('editor');
		}
	},
	
	
	/*=-=-=-=-=- Add to Cart Lightbox -=-=-=-=-=*/

	'add_to_cart': function(data){
		this.setup({
			'lb': {'width': 240, 'height': 'auto', 'min-height': 284, 	'padding': '12px 20px', 'background': '#fff' },
			'spacer': {'width': 264},
			'close': { 'top': 3, 'right': 3 }
		});
	
		//define the sizes available for each aspect ratio
		var sizes = {
			'landscape': new Hash({ '8': '8', '10': '10', '12': '12', '14': '18', '18': '25' }),
			'square': new Hash({ '8': '8', '10': '10', '12': '12', '14': '18', '18': '25' }),
			'portrait': new Hash({ '8': '8', '10': '10', '12': '12', '14': '18', '18': '25' })
		};
		
		//set up the size dropdown to the correct initial value
		if($chk(data.size)){
			var shape = data.size.split('_')[0];
			var size = data.size.split('_')[1];
			var shape_arg = shape;
		}
		else{
			var shape = data.shape;
			var size = 8;		
			var shape_arg = '';
		}
			
		var price = 0;
		
		//function to generate a new size dropdown
		var size_dropdown = function(){
			var drop = new Element('select', {'id': 'size_dropdown_' + ($$('.size_dd').length + 1), 'class': 'size_dd cart_col_1'});
			
			//for each size, add an option row
			(sizes[shape]).each(function(value, key){
				var selected = ''
				if(price == 0){
					if(size == key){
						selected = 'selected';
						price = value;
					}
				}
				
				drop.grab(
					new Element('option', {
						'text': key + ' inch .... $' + value,
						'value': JSON.encode({'shape': shape, 'size': key, 'price': value}),
						'selected': selected
					})
				);
			})
			
			//set up the dropdown to update the price when changed
			drop.addEvent('change', function(){
				update_price();
			});
			
			return drop;
		}
		
		//updates the price for a size based on the base price and quantity, also updates the total price
		var update_price = function(){
			var sum = 0;
			
			//calculate the price of each size/quantity combination and keep a running total
			$$('#size_rows > div').each(function(el){
				var p = JSON.decode(el.getChildren('.size_dd')[0].get('value')).price;
				var q = el.getChildren('.cart_col_2')[0].get('value'); 
				
				el.getChildren('.cart_col_3')[0].set('text', '$' + (p * q));
				
				sum += (p * q);
			});
			
			//update the total price
			$('total_line').set('text', 'Total: $' + sum);
		}
		
		//add events to the quantity box to update the price and restrict the allowed input
		var qty_events = {
			'keydown': function(e){
				if ($type(e.key.toInt()) != 'number' && e.key != 'backspace' && e.key != 'delete'){
					return false;
				}
			},
			'keyup': function(){
				update_price();
			}
		};
		
		//create the add another size link
		var add_another = new Element('a', {
			'id': 'add_another_size',
			'href': 'javascript:void(0)',
			'text': '+ Add Another Size',
			'events': {
				'click': function(){
			
					//when the link is clicked, add a new size row
					$('size_rows').grab(
						new Element('div').adopt(
							size_dropdown(),
							new Element('input', {'value': 1, 'class': 'cart_col_2', 'maxlength': 3}).addEvents(qty_events),
							new Element('p', {'text': '$5', 'class': 'cart_col_3'}),
							
							//add a link to delete an added row
							new Element('a', {
								'href': 'javascript:void(0)',
								'text': 'X',
								'class': 'delete_row',
								'events': {
									'click': function(){
										this.getParent().dispose();
										update_price();
									},
									'mouseenter': function(e){
										e.stopPropagation();
									}
								}
							})
						)
					)
					update_price();
				}
			}
		});
		
		//lightbox content for an add to cart request
		var add_to_cart_event = function(log_id){
			var count = 0;
			var data = new Array();
		
			//gather information about each size dropdown
			$$('#size_rows > div').each(function(el){
				var dropdown = JSON.decode(el.getFirst('select').get('value'));

				data[count++] = {
					'shape': dropdown.shape,
					'size': dropdown.size,
					'file': log_id,
					'qty': el.getFirst('input').get('value')
				}
			});
			
			//ajax request to execute the add to cart
			new Request({				
				'url': baseUrl + 'request/add_to_cart' + (shape_arg ? '/' + shape_arg : ''),
				'onComplete': function(){
					document.location = baseUrl + 'shop/cart';
				}
			}).send({'data': {'data': JSON.encode(data)}});
		}		
		
		var pic = new Element('img', {'id': 'preview_image'});
		
		//generate the add to cart form
		var el = new Element('div', {'id': 'cart_form'}).adopt(
			new Element('div', {'class': 'img_wrapper'}).grab( pic ),
			new Element('div').adopt(
				new Element('label', {'text': 'Size', 'class': 'cart_label_1'}),
				new Element('label', {'text': 'Qty', 'class': 'cart_label_2'}),
				new Element('label', {'text': 'Price', 'class': 'cart_label_3'})
			),
			new Element('div', {'id': 'size_rows'}).grab(
				new Element('div').adopt(
					size_dropdown(),
					new Element('input', {'value': 1, 'class': 'cart_col_2', 'maxlength': 3}).addEvents(qty_events),
					new Element('p', {'text': '$' + price, 'class': 'cart_col_3'})
				)
			),
			new Element('div').adopt(
				add_another,
				new Element('p', {'id': 'total_line', 'text': 'Total: $' + price})
			),
			new Element('button', {'type': 'button', 'id': 'add_to_cart_button', 'text': 'Add to Cart'}).addEvent('click', function(){ add_to_cart_event(data.log_id) })
		);
		
		var im = new Image();
		
		//preload the preview thumbnail
		im.onload = function(){
			if ( ! $chk(data.no_rebuild) && $chk(ft)){
				ft.mode.locked = false;
				ft.set_loading();
			}

			pic.set('src', im.src);
			lb.update_lb(el);
		}		
		
		//set up the loading message if neccessary
		if ( ! $chk(data.no_rebuild) && $chk(ft)){
			ft.mode.locked = true;
			ft.set_loading();
		}
		
		//load the correct thumbnail based on if it needs to be built
		if ($chk(data.no_rebuild)){		
			im.src = baseUrl + 'request/image/' + data.log_id + '/thumb/' + new Date().getTime();
		}
		else {
			im.src = baseUrl + 'request/compile_image/' + data.log_id + '/thumb/' + new Date().getTime();
		}
	},
	
	
	/*=-=-=-=-=- Upload Lightbox -=-=-=-=-=*/
	
	'upload': function(){
		this.setup({ 'lb': { 'width': 448, 'min-height': 0, 'padding': '22px 30px', 'background': '#fff' } })
		
		var el = new Element('div', {'id': 'upload_lb'});
		$(document.body).grab(el);
		
		//load the upload lightbox content from a file
		new Request.HTML({
			'url':baseUrl + 'request/upload_lb',
			'update': 'upload_lb',
			'onComplete': function(){
				//add a hidden iframe to upload the image to and keep track of the progress bar status
				$('upload_form').grab(
					new Element('iframe', {
						'id': 'progress_iframe',
						'name': 'progress_iframe',
						'src': '/js/progress_bar.php'
					}).setStyle('display', 'none')
				);
				
				//hide the real upload form and set the styled box's text to copy the upload form's text
				$$('#upload_float').setStyles({
					'opacity': 0,
					'visibility': 'visible'
				}).addEvent('change', function(){
					$('browse_box').set('text', this.get('value'));
				});
			
				//move the real browse box underneath the mouse as the mouse moves through the styled upload form
				$('browse_box').addEvent('mousemove', function(e){
					var pos = $('lightbox').getCoordinates();
					this.getPrevious().setStyles({
						'right': pos.right - e.page.x - 30,
						'top': e.page.y - pos.top - 10
					});
				});
				
				//when the upload form is submitted, set up and start the progress bar		
				$('upload_form').addEvent('submit', function(e){
					
					//construct the progress bar and insert it into the lightbox
					var p_bar = new Element('div', {'id': 'progress_bar'});
					var p_pcnt = new Element('p', {'id': 'progress_percent', 'text': '0%'});
					var p_msg = new Element('p', {'id': 'progress_message'});
					
					this.setStyle('display', 'none');
					this.getParent().adopt(
						new Element('div', {'id': 'progress_bar_wrapper'}).grab( p_bar ),
						new Element('div', {'id': 'progress_status'}).adopt(
							p_msg, p_pcnt,
							new Element('input', {'type': 'hidden', 'id': 'progress_start', 'value': $('upload_key').get('value')})
						)
					);
					
					var old_progress = 0;
					var step = 1;
					
					var p_bar_tween = new Fx.Tween(p_bar, {'duration': 1000});
					
					//this function executes at an interval to pole for changes in the upload progress and update the progress bar
					var update_progress = function(){
						
						//fetch the progress from the iframe, and if there is a problem with it, revert it to its previous value
						var progress = window.frames['progress_iframe'].progress;
						
						if ( ! $chk(progress) || progress.length > 3){
							progress = old_progress;
						}
						
						old_progress = progress;
						
						//animate the progress bar and update the progress percentage text
						p_bar_tween.cancel().start('width', ( progress > 98 ? 98 : progress ) * 2);
						p_pcnt.set('text', progress + '%');
	
						//animate the moving dots
						if (step == 4){
							step = 1;
						}
						else {
							var dots = '...'.substring(0, step);
							p_msg.set('text', 'Uploading' + dots);
							step++;
						}
					}
					
					update_progress();
					update_progress.periodical(500);
				});
				
				lb.update_lb(el);
			}
		}).send();
	},
	
	
	/*=-=-=-=-=- Login Lightbox -=-=-=-=-=*/

	'login': function(){
		this.setup({ 'lb': { 'width': 448, 'height': 'auto', 'min-height': 180, 'padding': '22px 30px', 'background': '#fff' } });
		
		var el = new Element('div', {'id': 'login_lb'});
		$(document.body).grab(el);

		//load the lightbox content for the login from a file
		new Request.HTML({
			'url': baseUrl + 'request/login_lb',
			'update': 'login_lb',
			'onComplete': function(){
				lb.login_setup('front');
				lb.update_lb(el, $('login_email'));
			}
		}).send();
	},
	
	'login_setup': function(mode){
		//login button is clicked, process and create an upload form
		$('login_button').addEvent('click', function(){
			lb.login_process(mode);
		});
		
		//allow the enter key to submit the form
		$$('#login_row input').addEvent('keydown', function(e){
			if(e.key == 'enter'){
				lb.login_process(mode);
			}
		});
		
		$$('#login_lb input').addEvent('keydown', function(e){
			if(e.key == 'enter'){
				lb.login_process(mode);
			}
		});
		
		lb.close_button();				
	},
	
	'login_process': function(mode){
		if (mode == 'front'){
			var update = 'login_lb';
		}
		else if (mode == 'editor'){
			var update = 'save_lb';
		}
		else if (mode == 'checkout'){
			var update = 'checkout_lb';
		}
		
		new Request.HTML({
			'url': baseUrl + 'request/login_user/' + mode,
			'update': update,
			'onComplete': function(){
				if (mode == 'front'){
					var utype = $('login_utype');
					
					if ($chk(utype)){
						$('menu_logged_out').addClass('hidden');
						$('menu_logged_in').removeClass('hidden');
						if (utype.get('value') == 1) {
							$$('.menu_admin_link').removeClass('hidden');
						}
						
						lb.hide();
					}
					else {
						lb.login_setup('front');
						$('login_email').focus();
					}
					
                    // if(document.location == 'http://www.fractureme.com/shop/cart'){
					if(document.location.indexOf('/shop/cart', 0) != -1){
						document.location.reload();
					}
				}
				else if (mode == 'editor'){
					lb.save_setup();
					if ($chk($('save_name'))){
						$('save_name').focus();
					}
					lb.close_button();
				}
				else if (mode == 'checkout'){
					if($('logged_in')){
						document.location = baseUrl + 'shop/checkout_shipping';
					}
					else {
						lb.checkout_setup();
						lb.close_button();
					}
				}
				
				if (mode != 'editor'){
					new Request({
						'url': baseUrl + 'request/get_cart_count',
						'onComplete': function(resp){
							$('cart_count').set('text', 'cart (' + resp +')');
						}
					}).send();
				}
			}
		}).send({
			'data': {
				'login_email': $('login_email').get('value'),
				'login_password': $('login_password').get('value')
			}
		});
	},
	
	
	/*=-=-=-=-=- Signup Lightbox -=-=-=-=-=*/
	
	'signup': function(){
		this.setup({
			'lb': { 'width': 678, 'height': 'auto', 'min-height': 0, 'padding': '22px 30px' },
			'close': { 'top': 8, 'right': 8 }
		});
		
		var el = new Element('div', {'id': 'signup_lb'});
		$(document.body).grab(el);

		//load the lightbox content for the login from a file
		new Request.HTML({
			'url': baseUrl + 'request/signup_lb',
			'update': 'signup_lb',
			'onComplete': function(){
				lb.signup_setup('front');
				lb.update_lb(el, $('signup_email'));
			}
		}).send();
	},
	
	'signup_setup': function(mode){
		$('signup_button').addEvent('click', function(){
			lb.signup_process(mode);
		});

		//allow the enter key to submit the form
		$$('#signup_row input').addEvent('keydown', function(e){
			if(e.key == 'enter'){
				lb.signup_process(mode);
			}
		});
		
		$$('#signup_lb input').addEvent('keydown', function(e){
			if(e.key == 'enter'){
				lb.signup_process(mode);
			}
		});
		
		lb.close_button();
	},
	
	'signup_process': function(mode){
		if (mode == 'front'){
			var update = 'signup_lb';
		}
		else if (mode == 'editor'){
			var update = 'save_lb';
		}
		else if (mode == 'checkout'){
			var update = 'checkout_lb';
		}
		
		//do the registration request and reinitialize the lightbox
		new Request.HTML({
			'url': baseUrl + 'request/signup_user/' + mode,
			'update': update,
			'onComplete': function(){
				if(mode == 'front'){
					lb.signup_setup('front');
					$('signup_email').focus();
				}
				else if (mode == 'editor'){
					lb.save_setup();
				}
				else if (mode == 'checkout'){
					lb.checkout_setup();
				}
			}
		}).send({
			'data': {
				'signup_email': $('signup_email').get('value'),
				'signup_pw': $('signup_pw').get('value'),
				'signup_confirm_pw': $('signup_confirm_pw').get('value')
			}
		});
	},
	
	
	/*=-=-=-=-=- Checkout Lightbox -=-=-=-=-=*/
	
	'checkout': function(){
		this.setup({
			'lb': { 'width': 678, 'height': 'auto', 'min-height': 0, 'padding': '22px 30px' },
			'close': { 'top': 8, 'right': 8 }
		});
		
		var el = new Element('div', {'id': 'checkout_lb'});
		$(document.body).grab(el);
		
		new Request.HTML({
			'url':baseUrl + 'request/checkout_lb',
			'update': 'checkout_lb',
			'onComplete': function(){
				lb.checkout_setup();
				lb.close_button();
				lb.update_lb(el);
			}
		}).send();
	},
	
	'checkout_setup': function(){
		//set up links that show the correct form based on if the user wants to login or register
		$$('.signup_link').addEvent('click', function(){
			$('signup_row').setStyle('display', 'block');
			$('login_row').setStyle('display', 'none');
			$('signup_email').focus();
		});

		$$('.login_link').addEvent('click', function(){
			$('signup_row').setStyle('display', 'none');
			$('login_row').setStyle('display', 'block');
			$('login_email').focus();
		});			
		
		lb.login_setup('checkout');
		lb.signup_setup('checkout');
	},
	
	
	/*=-=-=-=-=- Email Lightbox -=-=-=-=-=*/
	
	'email_from_editor': function(data){
		this.setup({
			'lb': {'width': 678, 'height': 'auto', 'min-height': 0, 'padding': '22px 30px' },
			'close': { 'top': 8, 'right': 8 }
		});
		
		var el = new Element('div', {'id': 'email_lb'});
		$(document.body).grab(el);
		
		new Request.HTML({
			'url': baseUrl + 'request/email_lb',
			'update': 'email_lb',
			'onComplete': function(){				
				var email_process = function(){
					ft.mode.locked = true;
					ft.set_loading();
					
					//ajax request to send the email
					new Request.HTML({
						'url': baseUrl + 'request/email_friend',
						'update': 'email_lb',
						'onComplete': function(){
							ft.mode.locked = false;
							ft.set_loading();
							email_setup();
							$('send_to_address').focus();
						}
					}).send({'data': {
						'email' : $('send_to_address').get('value'),
						'logid' : data
					}});
				}
				
				var email_setup = function(){				
					//send email button is clicked
					$('save_button').addEvent('click',function() {
						email_process();
					});
					
					$('send_to_address').addEvent('keydown', function(e){
						if(e.key == 'enter'){
							email_process();
						}
					});
					
					lb.close_button();
				}
				
				email_setup();
				lb.update_lb(el, $('send_to_address'));
			}
		}).send();
	}
});

window.addEvent('domready',function(){
	lb = new Lightbox();
	
	$$('.lb_show').addEvent('click', function(){
		lb.show({'mode': this.get('id')});
	});
});