/**
 * change-layout.js
 * Script to change dynamically the layout of any page
 * (hide 1 or the 2 sidebars)
 * Part of twisterss scripts
 */

if( ui == undefined )
	var ui = {};

ui.layoutChanger =
{	
	/**
	 * List of available layouts
	 */
	availableLayouts: 
	[
		/**
		 * Layout without sidebars
		 */
		{
			
			/**
			 * Convert the original layout into this layout
			 * @return the width of the sidebar and the space to apply
			 */
			install: function()
			{
				$( 'sidebar3' ).setStyle( 'display', 'none' );
				$( 'sidebar2' ).setStyle( 'display', 'none' );
				$( 'sidebar1' ).setStyle( 'display', 'none' );
				return { width: 0, space: 0 };
			},
			
			/**
			 * Convert this layout into the original layout
			 * @return the width of the sidebar
			 */
			uninstall: function()
			{
				$( 'sidebar3' ).setStyle( 'display', 'block' );
				$( 'sidebar2' ).setStyle( 'display', 'block' );
				$( 'sidebar1' ).setStyle( 'display', 'block' );
				return { width: 460, space: 20 };
			}
		},
		
		/**
		 * Layout with only one sidebar
		 */
		{
			/**
			 * Convert the original layout into this layout
			 */
			install: function()
			{				
				$( 'sidebar1' ).getChildren()[0].insertBefore( $( 'ajax-calendar-1' ), $( 'sidebar1' ).getChildren()[0].getChildren()[0] );
				$( 'sidebar1' ).getChildren()[0].appendChild( $$( '.widget_links' )[0] );
				$( 'sidebar1' ).getChildren()[0].appendChild( $$( '.widget_Twidget' )[0] );
				$( 'sidebar1' ).getChildren()[0].appendChild( $$( '.widget_meta' )[0] );
				$( 'sidebar3' ).setStyle( 'display', 'none' );
				$( 'sidebar2' ).setStyle( 'display', 'none' );
				return { width: 230, space: 10 };
			},
			
			/**
			 * Convert this layout into the original layout
			 */
			uninstall: function()
			{
				$( 'sidebar2' ).getChildren()[0].appendChild( $( 'ajax-calendar-1' ) );
				$( 'sidebar2' ).getChildren()[0].appendChild( $$( '.widget_links' )[0] );
				$( 'sidebar2' ).getChildren()[0].appendChild( $$( '.widget_Twidget' )[0] );
				$( 'sidebar2' ).getChildren()[0].appendChild( $$( '.widget_meta' )[0] );
				$( 'sidebar3' ).setStyle( 'display', 'block' );
				$( 'sidebar2' ).setStyle( 'display', 'block' );
				return { width: 460, space: 20 };
			}
		}
	],

	/**
	 * Active layout
	 */
	activeLayout: 2,
	
	/**
	 * Default layout
	 */
	defaultLayout: 2,

	/**
	 * Active state
	 */
	activeState: { width: 460, space: 20 },
	
	/**
	 * Modify the layout to layoutNumber, or
	 * to default if layoutNumber isn't defined or is the number of layouts available
	 */
	changeLayout: function( layoutNumber, immediate )
	{
		if( typeof layoutNumber == "undefined"  )
			layoutNumber = this.availableLayouts.length;
		if( layoutNumber != this.availableLayouts.length && typeof this.availableLayouts[layoutNumber] == "undefined" )
			return;
			
		var newState = this.activeState;
		
		//hides the sidebar
		$( 'sidebarsContainer' ).setStyle( 'display', 'none' );
			
		//uninstalls the current layout
		if( this.activeLayout != this.availableLayouts.length )
			newState = this.availableLayouts[this.activeLayout].uninstall();
			
		//installs the new layout
		if( layoutNumber != this.availableLayouts.length )
			newState = this.availableLayouts[layoutNumber].install();
			
		//changes the width and shows the sidebar again
		if( newState.width != this.activeState.width || newState.space != this.activeState.space )
		{
			this.resizeContent( this.activeState, newState, immediate );
			this.activeState = newState;
		}
		else
			$( 'sidebarsContainer' ).setStyle( 'display', 'block' );
		
		this.activeLayout = layoutNumber;
		if( layoutNumber != this.defaultLayout )
			Cookie.set( 'selectedLayout', layoutNumber, {path: '/'} );
		else
			Cookie.remove( 'selectedLayout', {path: '/'} );
		
		this.notifyLayoutChanged();			
	},
	
	/**
	 * Makes the transition from a state to an other
	 * with or without effects
	 */
	resizeContent: function( oldState, newState, immediate )
	{
		var primaryContContFx = new Fx.Style( 'primaryContentContainer', 'margin-right' );
		var primaryContFx = new Fx.Style( 'primaryContent', 'margin-right' );
		if( immediate == true )
		{
			$( 'primaryContentContainer' ).setStyle( 'margin-right', '-' + newState.width + 'px' );
			$( 'primaryContent' ).setStyle( 'margin-right', ( newState.width + newState.space ) + 'px' );
			$( 'sidebarsContainer' ).setStyle( 'display', 'block' );
		}
		else
		{
			new Fx.Style( 'primaryContentContainer', 'margin-right', { transition: Fx.Transitions.Back.easeOut, duration: 1000 } ).start( - oldState.width, - newState.width );
			new Fx.Style( 'primaryContent', 'margin-right', { transition: Fx.Transitions.Back.easeOut, duration: 1000, onComplete: function()
			{
				$( 'sidebarsContainer' ).setStyle( 'opacity', '0' );
				$( 'sidebarsContainer' ).setStyle( 'display', 'block' );
				new Fx.Style( 'sidebarsContainer', 'opacity' ).start( 0, 1 );
			}} ).start( oldState.width + oldState.space, newState.width + newState.space );
		}
	},
	
	/**
	 * Notifies the change of layout to the user
	 */
	notifyLayoutChanged: function()
	{
		var layoutNumber = this.availableLayouts.length;
		if( this.activeLayout != null )
			layoutNumber = this.activeLayout;
		for( var i = 0; i <= this.availableLayouts.length; i++ )
			if( i == layoutNumber )
				$( 'layout-' + i + '-change' ).getParent().addClass( 'active-layout' );
			else
				$( 'layout-' + i + '-change' ).getParent().removeClass( 'active-layout' );
	},
	
	/**
	 * Selects the best layout to start with
	 */
	selectStartLayout: function()
	{
		//we adapt the default layout depending on the width of the window
		if( window.getWidth() <= 800 )
			this.defaultLayout = 1;
		else
			this.defaultLayout = 2;

		//layout saved in a cookie ?
		var saved = Cookie.get( 'selectedLayout' );
		if( saved === false )
			saved = this.defaultLayout;
		this.changeLayout( saved, true );
	},
	
	/**
	 * Shows and initializes the layout switchers
	 */
	init: function()
	{
		//inits the effects to be used
		ui.layoutChanger.primaryContContFx = new Fx.Style( 'primaryContentContainer', 'margin-right' );
		ui.layoutChanger.primaryContFx = new Fx.Style( 'primaryContent', 'margin-right' );
		
		//function to be called as event
		function changeSiteLayout()
		{
			this.changer.changeLayout.bind( this.changer )( this.layoutNumber );
		}
		//shows the switchers and adds the event
		for( var i = 0; i < 3; i++ )
		{
			$( 'layout-' + i + '-change' ).getParent().setStyle( 'display', 'block' );
			$( 'layout-' + i + '-change' ).addEvent( 'click', changeSiteLayout.bind( {
				layoutNumber: i,
				changer: this
			} ) );
		}
		//selects the best layout to start with
		this.selectStartLayout();
	}
}