/*
|--------------------------------------------------------------------------
| Amedia Creative Frontend Framework > Lightbox
|--------------------------------------------------------------------------
|
| @package		Amedia Creative
| @subpackage	Frontend Framework
| @company		Amedia Creative, Inc.
| @phone		310/651/8733
| @fax			310/388/1210
| @author		Joey Avino
| @email		joey@amediacreative.com
| @link			http://www.amediacreative.com
| @copyright	2008 Amedia Creative, Inc.
| @requires 	mootools.1.2.js
|
*/

/*
|--------------------------------------------------------------------------
| Amedia Creative Frontend Framework > Lightbox > Core JavaScript
|--------------------------------------------------------------------------
|
| NOTE: Do not change the names of these classes.
|
*/

	/**
	* Function to call and display the lightbox from an event.
	* In this example, it's used href="javascript: "
	*
	* @name 	Display Lightbox
	* @access 	public
	* @param 	var-type none
	* @return 	none
	* @author 	Joey Avino
	* @email	joey@amediacreative.com
	*/ 
	function display_lightbox(_obj, _overlay, _duration, _opacity) {
	
		var obj = $$(_obj);
		var overlay = $$(_overlay);

		/* ----- This displayes and hides the ligtbox and gets it ready for the transition. -------------- */
		obj.setStyle('opacity', '0');
		obj.setStyle('-moz-opacity', '0');
		obj.setStyle('filter', 'alpha(opacity=0)');
		obj.setStyle('display', 'block');

		overlay.setStyle('opacity', '0');
		overlay.setStyle('-moz-opacity', '0');
		obj.setStyle('filter', 'alpha(opacity=0)');
		overlay.setStyle('display', 'block');

		/* ----- Display Lightbox. -------------- */
		obj.set('tween', { duration: _duration }).fade('in');
		overlay.set('tween', { duration: _duration }).fade(_opacity);

		/* ----- Position Lightbox In Viewport. -------------- */
		position_lightbox(obj, overlay);
		
		/* ----- Add a close event to the overlay so if a user clicks it closes the lightbox */
		overlay.addEvent('click', function() {

			close_lightbox(_obj, _overlay, _duration) ;

		});

	}

	/**
	* Function to call and hide the lightbox from an event.
	* In this example, it's used href="javascript: "
	*
	* @name 	Display Lightbox
	* @access 	public
	* @param 	var-type none
	* @return 	none
	* @author 	Joey Avino
	* @email	---
	*/ 
	function close_lightbox(_obj, _overlay, _duration) {

		var obj = $$(_obj);
		var overlay = $$(_overlay);

		obj.set('tween', { duration: _duration }).fade('out');
		overlay.set('tween', { duration: _duration }).fade('out');

	}

	/**
	* Function to position the ligthbox in the center of the screen.
	* Works if you have a vertical scrollbar.
	*
	* @name 	Position Lightbox
	* @access 	public
	* @param 	var-type none
	* @return 	none
	* @author 	Joey Avino
	* @email	---
	*/ 
	function position_lightbox(_obj, _overlay) {

		/* ----- Get viewport height. -------------- */
		/* ----- We don't get the width, who want's to horizontall scroll anyway. -------------- */
		var stage_height = document.getHeight(); // self.innerHeight;

		/* ----- Get lightbox sizing CSS properties. -------------- */
		var obj_width = _obj.getStyle('width');
		var obj_padding_left = _obj.getStyle('padding-left');
		var obj_padding_right = _obj.getStyle('padding-right');
		var obj_border_left = _obj.getStyle('border-left');
		var obj_obj_border_right = _obj.getStyle('border-right');

		var obj_height = _obj.getStyle('height');
		var obj_padding_top = _obj.getStyle('padding-top');
		var obj_padding_bottom = _obj.getStyle('padding-bottom');
		var obj_border_top = _obj.getStyle('border-top');
		var obj_border_bottom = _obj.getStyle('border-bottom');

		var obj_width_total = obj_width[0].toInt() + obj_padding_left[0].toInt() + obj_padding_right[0].toInt() + obj_border_left[0].toInt() + obj_obj_border_right[0].toInt();

		var obj_height_total = obj_height[0].toInt() + obj_padding_top[0].toInt() + obj_padding_bottom[0].toInt() + obj_border_top[0].toInt() + obj_border_bottom[0].toInt();

		/* ----- Caclualte Position. -------------- */
		var center_top = (stage_height/2);
		var final_width = (obj_width_total/2);
		var final_height = (obj_height_total/2);

		/* ----- Gets scroll height of the entire window. -------------- */
		var scrolled_px = window.getScrollHeight();
		var fixed_offset = center_top - (obj_height_total/2);

		/* ----- Sets position and of lightbox, and height of overlay. -------------- */
		_obj.setStyle('left', '50%');
		_obj.setStyle('margin-left', '-' + final_width + 'px');;
		_obj.setStyle('top', fixed_offset + 'px');
		_overlay.setStyle('height', scrolled_px);

	}