$(document).ready ( 
	function ()
	{
		function SlidingMenu ( container_name, menu_slider_width, duration )  // We get the parameters
		{
			// Let's make these class variables so other functions ( i.e. slide ) can access them
			this.effect_duration = duration; 
			this.menu_slider_width = menu_slider_width;
			this.is_animation_running = false;
			this.active_menu = $($( container_name + " .menu_slider" )[0]);

			// We do the bindings on object creation
			var self = this;
			$( container_name + " .menu_button" ).bind( "click", self, on_click ); // Menu button click binding
			 
			// Do the slide
			this.slide ( this.active_menu, this.menu_slider_width );

		}
		SlidingMenu.prototype.slide = slide;

		function slide ( menu_slider, width )
		{
			this.is_animation_running = true;
			var self = this;
			menu_slider.animate (
			{ 'width' : width },
			this.effect_duration,
			function ()
			{
				self.is_animation_running = false;
			}
			);
		}
		
		function on_click ( event )
		{
			// First check if the active_menu button was clicked. If yes, we do nothing ( return )
			if ( $(this).next()[0] == event.data.active_menu[0] ) // Remember, active_menu refers to the image ( thus next() )
			{
				return;
			}
			// Check if animation is running. If it is, we interrupt
			
			if ( event.data.is_animation_running )
			{
				return;
			}
			// Get the item next to the button
			var menu_slider = $(this).next();
			// First slide in the active_menu
			event.data.slide ( event.data.active_menu, 0 );
			// Set the active menu to the current image
			event.data.active_menu = menu_slider;
			// Then slide out the clicked menu
			event.data.slide ( event.data.active_menu, event.data.menu_slider_width );
		}
		
		
		
		var sl = new SlidingMenu( ".menu", 827, 1200 ); // We pass the two parameters when creating an instance of the menu
		
	}
);