jQuery.fn.panels = function(options) {

	config = {
		first_time: true,	
		start : 1,
		speed : 500,
		method : 'slide',
		resize_vertical : false,
		active_class : 'js_panels_active',
		els :{
			slider : '.js_panels_slider',
			panels : '.js_panels_panel',
			menu_items : '.js_panels_menuitem',
			menu_highlight: '.js_highlight'
		}
  };

	if (options) 
	{
	  config = jQuery.extend(true, config, options);
	}

	// define the move function
	function move_to_panel(i, config) {

		// menu
		var current_menu_item = $($(this).find(config.els.menu_items)[i]);

		$(this).find(config.els.menu_items).removeClass('js_active');
		current_menu_item.addClass('js_active');

		// menu highlight
		$(this).find(config.els.menu_highlight).animate({
			'left' : current_menu_item.position().left,
			'width' : current_menu_item.width()
		}, config.speed);


		if (config.method == 'slide') {
	
			// get widths of all previous panels
			var new_position = 0;
			var new_margin = 0;
			var new_height = $(this).height();
	
			$(this).find(config.els.panels).each(function(panel_i, panel_el){
				if (panel_i < i){
					new_position += $(panel_el).outerWidth(true);
				}
			});
	
			// add in half the current one
			new_margin = $($(this).find(config.els.panels)[i]).outerWidth(true) / 2;
	
			// compensate for the width of the viewing area
			new_margin -= $(this).outerWidth() / 2;
	
	
			// animate!
			$(this).find(config.els.slider).animate({
				'left' : -new_position,
				'marginLeft' : -new_margin
			}, config.speed);

		
		}
		
		if (config.method == 'fade'){
			if (config.first_time == true){
				$(config.els.panels).css('display', 'none');
				$($(config.els.panels)[i]).css('display', 'block');
				config.first_time = false;
			} else{
				$(config.els.panels).fadeOut(config.speed);
				$($(config.els.panels)[i]).fadeIn(config.speed);						
			}
		}


		// get the height of where we are headed
		if (config.resize_vertical == true){
			new_height = $($(this).find(config.els.panels)[i]).height();		

			// if set, resize the height
			$(this).animate({ 'height' : new_height}, config.speed );
		}

	}

	this.each(function() 
	{
		$(this).addClass(config.active_class)
		var panels_instance = this;
		// menu clicks
		$(this).find(config.els.menu_items).each(function(i, el){
			$(el).bind('click', {'config': config, 'panels_instance': panels_instance}, function(e){
				e.preventDefault();
				move_to_panel.call(e.data.panels_instance, i, e.data.config);
			});
		});

		// finally, move to default
		move_to_panel.call(this, 0, config);
	});
	
};