var ELF_LayoutResizer = new Class({
	Implements: Options,

	options: {
		minTag: 'min',
		minValue: '930px',
		maxTag: 'max',
		maxValue: '1300px',
		flexTag: 'flex',
		flexValue: '95%', /* = a quello impostato nel CSS -> poteri leggerlo nella initialize ? */
		cookieName: 'ELF_LayoutResizer',
		cookiePath: '/'
	},

	initialize: function( targetLayoutElementID , controlsContainerID, options ){
		this.setOptions(options);
		this.layoutElement=$(targetLayoutElementID);		
		if (!this.layoutElement) 
			return;
		//this.options.flexValue=this.layoutElement.getStyle("width")
		this.setControls(controlsContainerID)
		this.resizeFx = new Fx.Tween( this.layoutElement , {	
			property: 'width',
			duration: 500, 
			transition: Fx.Transitions.Quart.easeInOut,
			link: 'chain'
		});
	},
	
	restoreSize: function() {
		var storedSizeTag = Cookie.read(this.options.cookieName);
		if (storedSizeTag!=null) {
			if (storedSizeTag==this.options.minTag) {
				this.layoutElement.setStyle("width", this.options.minValue);
			} else if (storedSizeTag==this.options.maxTag) {
				this.layoutElement.setStyle("width", this.options.maxValue);
			} else {
				// Lascio il valore del CSS oppure imposto il flexValue?
				// E' meglio lasciare quello del CSS cosi rimangono attivi eventuali patch tipo IE6 min-width expression ecc.

				// Se lo volessi impostare
				// Mootools do not detect IE6 correctly -> window.ie6 -> uso direttamente JS 
				//var arVersion = navigator.appVersion.split("MSIE"); 
				//var version = parseFloat(arVersion[1]); 
				//if (version == 6) { 
					//alert("ie6");
					//this.layoutElement.setStyle("width", 'expression(document.body.clientWidth > 1444 ? "1300px": document.body.clientWidth < 1033 ? "930px": "90%" )' );
				//} else {
					//this.layoutElement.setStyle("width", this.options.flexValue);					
				//}
				// Elimino il coockie
				Cookie.dispose(this.options.cookieName);
			}
		}
	},
	
	setMinSize: function() {
		// Devo gestire il cambio di unita di misura
		if ( this.layoutElement.getStyle("width").contains("%") ) {
			var curPixSize=this.layoutElement.getWidth();
			this.resizeFx.options.unit="px";
			this.resizeFx.start(curPixSize,this.options.minValue);
		} else {
			this.resizeFx.start(this.options.minValue);
		}
		Cookie.write(this.options.cookieName,this.options.minTag, {path: this.options.cookiePath} );
	},

	setMaxSize: function() {
		// Devo gestire il cambio di unita di misura
		if ( this.layoutElement.getStyle("width").contains("%") ) {
			var curPixSize=this.layoutElement.getWidth();
			this.resizeFx.options.transition=Fx.Transitions.Back.easeOut,
			this.resizeFx.options.unit="px";
			this.resizeFx.start(curPixSize,this.options.maxValue);
		} else {
			this.resizeFx.start(this.options.maxValue);
		}
		Cookie.write(this.options.cookieName,this.options.maxTag, {path: this.options.cookiePath} );
	},
	
	setFlexSize: function() {
		// Devo gestire il cambio di unita di misura
		if ( this.layoutElement.getStyle("width").contains("px") ) {
			curPercSize=( this.layoutElement.getStyle("width").toInt() / document.body.getWidth() ) * 100;			
			this.resizeFx.options.transition=Fx.Transitions.Back.easeOut,
			this.resizeFx.options.unit="%";
			this.resizeFx.start(curPercSize,this.options.flexValue);
		}
		Cookie.write(this.options.cookieName,this.options.flexTag, {path: this.options.cookiePath} );
	},	

	setControls: function(controlsContainerID) {

		var el=$(controlsContainerID);
		if (!el) 
			return;

		//$$("#"+controlsContainerID+" .flex").addEvent('click', this.setFlexSize.bind(this) );
		// Per eseguire più istruzioni e ridefinide il this facendolo riferire a questo oggetto faccio cosi		
		$$("#"+controlsContainerID+" .min").addEvent('click', function(event) { 
			event.stop(); // Equivale al "return false" sull'onclick del link
			//event.target.hideFocus=true; /* Funzionerebbe solo su IE8 -> uso l'outline nel CSS */
			this.setMinSize();
		}.bind(this) );
		
		$$("#"+controlsContainerID+" .max").addEvent('click', function(event) {
			event.stop();
			this.setMaxSize();
		}.bind(this) );

		$$("#"+controlsContainerID+" .flex").addEvent('click', function(event) {
			event.stop();
			this.setFlexSize();
		}.bind(this) );
		
	}
	
});