/**
 * Basic javascript class which handles slider buttons with an On/Off-switch like structure.
 *
 * @author Foad Farkhondeh / Egmont Tidskrifter
 *
 * DEPENDICIES:
 *  - jQuery version 1.42+
 *  - slideThisUp/slideThisDown which performs a jQuery( sel ).slideDown()/jQuery( sel ).slideUp();
 *
 * USAGE INSTRUCTIONS:
 * 1) Setting up the HTML: Create the slider button and the container belonging to it
 *
 * 	1.1) Create a container with a class attribute. This will contain our button nodes.
 *
 * 	1.2) In it, create 2 item nodes with class attributes which will represent the visible part
 * 	     of the On/Off like structure.
 *
 * 	1.3) Also in the container, create one node with a class attribute that will be the actual
 *         slider button.
 *
 * 	1.4) After the button container is done, create another container with a class attribute.
 * 		  This container will be the one which folds up/down when the slider button is pressed
 *
 * 2) Setting up the script
 *
 * 	2.1) Create a new Slider instance. E.g. "slider = new Slider();"
 *
 * 	2.2) Now use slider.Set* to set settings. These settings includes the class attributes for
 *         the nodes created in step 1, and also a setting for default visibility of the container
 *         belonging to the button.
 *
 * 	2.3) Finally, initialize the slider button. E.g. "slider.Initialize();"
 *
 *
 */

function Slider()
{
	/**
	 * Properties
	 */
	this.sliderContainerClass = "onoff-controller";
	this.sliderButtonClass = "slider";
	this.elementCurtainClass = "slideout";
	this.defaultDisplay = true;

	/**
	 * Methods
	 */

	/**
	 * Initializes the Slider class.
	 */
	this.Initialize = function()
	{
		var obj = this;

		if( this.defaultDisplay ){
			this.ToggleSlider( "." + this.sliderContainerClass );
		}

		jQuery( "." + this.sliderContainerClass ).click( function()
		{
			obj.ToggleSlider( this );
		} );
	};

	/**
	 * Toggles the slider button.
	 *
	 * @param element		The class name of the slider button container
	 */
	this.ToggleSlider = function( element )
	{
		// Get this slider (a child)
		var tmpSlider = jQuery( element ).children( "." + this.sliderButtonClass );

		// Calculate offset
		var offset;
		if( tmpSlider.position().left > 0 )
			offset = 0;
		else
			offset = ( jQuery( element ).width() - tmpSlider.width() ) + "px";

		// Animate
		tmpSlider.animate({ left: offset }, 300);

		// Toggle curtain up/down
		this.ToggleCurtain( "#" + this.elementCurtainClass );
	};

	/**
	 * Toggles the curtain-like container belonging to the slider button
	 *
	 * @param element		The class name of the container
	 */
	this.ToggleCurtain = function( element )
	{
		var display = jQuery( element ).css( "display" );

		if( display == "none" )
			slideThisDown( element );
		else
			slideThisUp( element );
	};

	/**
	 * Getters and Setters
	 */

	/**
	 * Set the class of the container containing the slider button
	 * 
	 * @param value
	 */
	this.SetSliderContainerClass = function( value )
	{
		this.sliderContainerClass = value;
	};
	/**
	 * Set the class of the slider-button.
	 *
	 * @param value	The class of slider which actually moves
	 */
	this.SetSliderButtonClass = function( value )
	{
		this.sliderButtonClass = value;
	};

	/**
	 * Set the class of the element which will slide up/down
	 *
	 * @param value	Name of the class
	 */
	this.SetElementCurtainClass = function( value )
	{
		this.elementCurtainClass = value;
	};

	/**
	 * Set the default display
	 *
	 * @param value	true/false, depending if the box should show or not as default
	 */
	this.SetDefaultDisplay = function( value )
	{
		this.defaultDisplay = value
	};
}