(function($) {

	var $_p = null; // Panel container. (do not allow multiple panels)
	var _visible = false;

	var $panel_container = function() {
		
		if (!$_p) {
			$_p = $("<div></div>").addClass("lso-panel-container")
					.append($("<div></div>").addClass('lso-panel')
						.append($("<div></div>").addClass("lso-panel-content"))
						.append($("<div></div>").addClass("clear"))
						.append($("<div></div>").addClass("lso-dotted-top"))
						.append($("<div></div>").addClass("lso-dotted-bottom"))
					);
												
			$('#wrapper').append($_p);
			
			
			var $_close = $("<a></a>").addClass('lso-panel-close').html('&times;').attr('href','#close');
			$_close.click(function() {
				_close();
				return false;
			});
			
			$_p.append($_close);
			
			
		}
		
		return $_p
	}
	
	var $panel = function() {
		return $panel_container().find('.lso-panel');
	}
	
	var $panel_content = function() {
		return $panel_container().find('.lso-panel-content');
	}
	
	
	var _close = function(callback) {	
		_visible = false;			
		var w = $panel_container().width();
		$('#wrapper').css({overflow: 'hidden'});
		$panel_container().animate({right:'-'+w+'px'}, 150, function() {
			$panel_container().hide();
			$('#wrapper').css({position:'static', overflow: 'auto'});
			if (callback) {
				callback();
			}
		});
	}
	

	
	$(function() {
		$('.lso-panel-opener').lsoPanel();	
	});
	
	$.fn.lsoPanel = function() {
		
		
		return this.each(function(opt) {
								
								
			var options = $.extend({},$.fn.lsoPanel.defaults,opt);
					
			var $obj = $(this);
									
			var _open = function(html,cssClass) {
				
				$.fn.lsoPanel.open($obj, html, cssClass);
			}
			
					
			
			$obj.click(function() {
				
				// Get the position before opening the panel, otherwise
				// it won't work correctly when opening a panel inside
				// the panel.
				var pos = $obj.offset();
														
				var $c = $obj.next('.lso-panel-content');																					
				if ($c.length) {
					$.fn.lsoPanel.open($obj, $c.html(), $obj.attr('class'), pos);
				}
			
				return false;
			});
			
			
		});
		
	}
	
	$.fn.lsoPanel.open = function($obj, html, cssClass, pos)  {

		if (_visible) {
			_close(function() {
				$.fn.lsoPanel.open($obj,html,cssClass, pos)
			});
			return;
		}

		_visible = true;

		if (!cssClass) cssClass = "lso-panel-container";
		else cssClass += " lso-panel-container";

		$('#wrapper').css({position:'relative',overflow: 'hidden'});



		if (html) {
			$panel_content().html(html);			
		}

		if (!pos) {
			pos = $obj.offset();
		}

		var top = $(document).scrollTop() + 150;
		var h	= $panel_container().height();
		if (top < pos.top - h + $obj.height()) {
			top = pos.top - h + $obj.height();
		}
		if (pos.top < top) {
			top = pos.top;
		}

		$panel_container().show();

		var w = $panel_container().width();

		$panel_container().css({top: top+'px',right:'-'+w+'px'}).attr('class',cssClass).animate({right:'-1px'}, 200, function() {
			$('#wrapper').css({overflow: 'visible'});
		});

		$panel_content().find('.lso-panel-opener').lsoPanel();
	}
	
	
	
	$.fn.lsoPanel.defaults = {
		
		// Per default the plugin checks if the next sibling of the object has the class lso-panel-content. If there is no
		// such element, the plugin tries to load the content from the url provided in the href tag.
		ajax: false,		// Load the content with AJAX (using the href attribute of the object).
		content: false		// Selector for a child container of the object holding the content to display in the panel.
		
	}
	
})(jQuery);