/**
 * class	LG_Portfolio
 * author	Paul Kruijt
 */
var LG_Portfolio = new Class({
	
	/**
	 * initialize
	 * @return void
	 */
	initialize: function()
	{
		// nodes
		this.document_node		= document.getElement('body');
		this.filter_node		= $('filter');
		this.popup_node			= $('popup');
		this.left_node			= $('left');
		this.close_btn_node		= $('close_btn');
		this.videoplayer_node	= $('videoplayer');
		
		// settings
		this.http_url	= '../http/get_portfolio.php';
	},
	
	/**
	 * show popup
	 * @param	string	category_name
	 * @param	integer	media_id
	 * @param	boolean	no_fade
	 * @param	integer	category_id
	 * @return	void
	 */
	showPopup: function(category_name, project_id, media_id, no_fade)
	{
		// set vars
		var _this		= this;
		var project_id	= !project_id ? 0 : project_id.toInt();
		var media_id	= !media_id ? 0 : media_id.toInt();
		
		if (this.filter_node && this.popup_node && category_name)
		{
			// hide video player
			if (this.videoplayer_node) this.videoplayer_node.setStyle('display', 'none');
			
			// show popup with fader
			if (no_fade != 1)
			{
				// show popup and filter
				this.filter_node.setStyle('opacity', '0');
				this.popup_node.setStyle('opacity', '0');
				this.filter_node.setStyle('display', 'block');
				this.popup_node.setStyle('display', 'block');
				
				var fader_duration = 1000;
				var fade_in_filter_effect = new Fx.Morph(this.filter_node, {duration: fader_duration, transition: Fx.Transitions.Quad.easeOut});
				fade_in_filter_effect.start({'opacity': [0, 0.6]});
				
				var fade_in_popup_effect = new Fx.Morph(this.popup_node, {duration: fader_duration, transition: Fx.Transitions.Quad.easeOut});
				fade_in_popup_effect.start({'opacity': [0, 1.0]}).chain(function()
                {
                	_this.loadContentPopup(category_name, project_id, media_id);
                });
			}
			
			// show popup without fader
			else
			{
				// show filter
                $('page_filter').setStyle('display','block');
                
                // fade in image
				var main_image_node = $('image_container');
				
				var fader_duration = 500;
				var fade_out_image_effect = new Fx.Morph(main_image_node, {duration: fader_duration, transition: Fx.Transitions.Quad.easeOut});
				fade_out_image_effect.start({'opacity': [1, 0]}).chain(function()
                {
                	// load content
                	_this.loadContentPopup(category_name, project_id, media_id);
                });
			}
		}
	},
	
	/**
	 * load content popup
	 * @param	string	category_name
	 * @param	integer	project_id
	 * @param	integer	media_id
	 * @return void
	 */
	loadContentPopup: function(category_name, project_id, media_id)
	{
		// set vars
		var _this = this;
		
		// set params
		var http_params = new Hash({
			'category_name'	: category_name,
			'project_id' 	: project_id,
			'media_id' 		: media_id
		});
		
		// make request
		var http_request = new Request.HTML({
			url				: this.http_url,
			update			: this.left_node,
			evalResponse	: true,
			onRequest		: function()
			{
				
			},
			onComplete	: function()
			{
				var main_image_node	= $('image_container');
				main_image_node.setStyle('opacity', '0');
				
				var fader_duration	= 500;
				
				var fade_out_image_effect = new Fx.Morph(main_image_node, {duration: fader_duration, transition: Fx.Transitions.Quad.easeOut});
				fade_out_image_effect.start({'opacity': [0, 1]});
                
				var close_btn_node 		= $('close_btn');
				var project_list_node	= $('project_list');
				var thumbnail_list_node	= $('thumbnail_list');
				var previous_node		= $('previous');
				var next_node			= $('next');
				
				// close button event
				if (close_btn_node)
				{
					close_btn_node.addEvent('click', function()
					{
						lg_portfolio.hidePopup();
						
						return false;
					});
				}
				
				// projects event
				if (project_list_node)
				{
					var project_anchor_nodes	= project_list_node.getElements('a');
					
					project_anchor_nodes.each(function(project_anchor_node, index_1)
					{
						project_anchor_node.addEvent('click', function()
						{
							var project_node_id		= this.get('id');
							var arr_project_node_id	= project_node_id.split('category_project_');
							var category_project_id	= arr_project_node_id[1];
							
							if (category_project_id > 0)
							{
								popup_step = 0;
								
								_this.showPopup(category_name, category_project_id, 0, 1);
							}
							
							return false;
						});
					});
				}
				
				// thumbnails event
				if (thumbnail_list_node)
				{
					var thumb_anchor_nodes	= thumbnail_list_node.getElements('a');
					
					thumb_anchor_nodes.each(function(thumb_anchor_node, index)
					{
						thumb_anchor_node.addEvent('click', function()
						{
							var thumb_node_id		= this.get('id');
							var arr_thumb_node_id	= thumb_node_id.split('thumb_photo_');
							var media_id			= arr_thumb_node_id[1];
							
							if (media_id > 0)
							{
								_this.showPopup(category_name, project_id, media_id, 1);
							}
							
							return false;
						});
					});
				}
				
				// next / previous event
				if (previous_node && next_node)
				{
					var previous_anchor_node	= previous_node.getElement('a');
					var next_anchor_node		= next_node.getElement('a');
					
					if (previous_anchor_node)
					{
						previous_anchor_node.addEvent('click', function()
						{
							var previous_anchor_id		= this.get('id');
							var arr_previous_anchor_id	= previous_anchor_id.split('previous_photo_');
							var previous_media_id		= arr_previous_anchor_id[1];
							
							if (previous_media_id > 0)
							{
								_this.showPopup(category_name, project_id, previous_media_id, 1);
							}
							
							return false;
						});
					}
					
					if (next_anchor_node)
					{
						next_anchor_node.addEvent('click', function()
						{
							var next_anchor_id		= this.get('id');
							var arr_next_anchor_id	= next_anchor_id.split('next_photo_');
							var next_media_id		= arr_next_anchor_id[1];
							
							if (next_media_id > 0)
							{
								_this.showPopup(category_name, project_id, next_media_id, 1);
							}
							
							return false;
						});
					}
				}
				/*
				var debug_node = $('cs_debug');
				
				if (!debug_node)
				{
					var debug_node = new Element('div',
					{
						'id' 		: 'cs_debug',
						'styles'	: 
						{
							'background': 'red',
							'border'	: '1px solid #FFFFFF',
							'position'	: 'fixed',
							'bottom'	: '20px',
							'right'		: '20px',
							'height'	: '200px',
							'overflow'	: 'auto',
							'width'		: '200px',
							'z-index'	: '9999'
						}
					});
					
					debug_node.inject(document.getElement('body'));
				}
				*/
				// scrollbar
				var scrollable_node					= $('thumbnail_list');
				var scrollable_node_coordinates		= scrollable_node.getCoordinates();
				var scrollable_node_height			= scrollable_node_coordinates.height;
				
				var scrollable_inner_node			= scrollable_node.getElement('div');
				var scrollable_inner_coordinates	= scrollable_inner_node.getCoordinates();
				var scrollable_inner_height			= scrollable_inner_coordinates.height;
				
				if (scrollable_inner_height > scrollable_node_height)
				{
					$('popup_scrollbar_y').setStyle('display', 'block');
					$('popup_scrollbar_handler_y').setStyle('display', 'block');
					
					// scroll to thumb
					/*
	                var thumbnail_list	= $('thumbnail_list');
	                var thumb_photo		= $('thumb_photo_'+media_id);
	                var scroll_step		= 0;
	                
	                if (thumbnail_list && thumb_photo)
	                {
	                	// get coordinates
	                	var adjustment_top = 0;
	                	
	                	if (Browser.Engine.gecko) adjustment_top = 11;
	                	
	                	var thumbnail_list_pos_top	= thumbnail_list.getCoordinates().top;
	                	var thumb_photo_height		= thumb_photo.getCoordinates().height;
	                	var thumb_photo_pos_top		= thumb_photo.getCoordinates().top;
	                	var scroll_to_pos			= (thumb_photo_pos_top - (thumbnail_list_pos_top - adjustment_top));
	                	var scroll_step				= (thumb_photo_height + scroll_to_pos) - scrollable_node.getSize().y;
	                	
	                	//scrollable_node.scrollTo(0, scroll_to_pos);
	                }
	                */
					
	                // create scrollbar
					makeScrollbar(scrollable_node, $('popup_scrollbar_y'), $('popup_scrollbar_handler_y'), 1);
				}
				else
				{
					$('popup_scrollbar_y').setStyle('display', 'none');
					$('popup_scrollbar_handler_y').setStyle('display', 'none');
				}
				
				// hide filter
                $('page_filter').setStyle('display','none');
			}
		});
		
		http_request.get(http_params);
	},
	
	/**
	 * hide popup
	 * @return void
	 */
	hidePopup: function()
	{
		if (this.filter_node && this.popup_node && this.left_node)
		{
			// show video player
			if (this.videoplayer_node) this.videoplayer_node.setStyle('display', 'block');
			
			// empty popup content
			this.left_node.empty();
		
			var _this = this;
			_this.filter_node.setStyle('opacity', '0.6');
			_this.popup_node.setStyle('opacity', '1');
			
			var fader_duration = 1000;
			var fade_out_popup_effect = new Fx.Morph(_this.popup_node, {duration: fader_duration, transition: Fx.Transitions.Quad.easeOut});
			fade_out_popup_effect.start({'opacity': [1, 0]});
			
			var fade_out_filter_effect = new Fx.Morph(_this.filter_node, {duration: fader_duration, transition: Fx.Transitions.Quad.easeOut});
			fade_out_filter_effect.start({'opacity': [0.6, 0]});

			// hide popup
			//this.filter_node.setStyle('display', 'none');
			//this.popup_node.setStyle('display', 'none');
			
			if ($('popup_scrollbar_y')) 		$('popup_scrollbar_y').setStyle('display', 'none');
			if ($('popup_scrollbar_handler_y')) $('popup_scrollbar_handler_y').setStyle('display', 'none');
			
			popup_step = 0;
		}
	}
});