// JavaScript Document

var kwicks = new Class( {
	defaultOptions: function() {
		return {
			container : 'myGallery-menu',
			elmsContainers : '#myGallery-menu li',
			elms : '#myGallery-menu img',
			display : null,
			minSize: 50,
			maxContainerSize: 1004
		};
	},
	initialize: function( options ) {
		this.setOptions(this.defaultOptions(), options);
		this.container = $( this.options.container );
		this.elmsContainers = $$( this.options.elmsContainers );
		this.elms = $$( this.options.elms );
		this.fxs = new Fx.Elements( this.elmsContainers, {wait: false, duration: 0, transition: Fx.Transitions.linear});
		this.params = {};
		
		var l = ( ( this.elms.length-1 )*this.options.minSize ) + 300;
		if( l < this.options.maxContainerSize ) {
			this.container.setStyle('width', l+'px');
			this.container.setStyle('margin-left', 'auto' );
			this.container.setStyle('margin-right', 'auto' );
			this.container.setStyle('border-right', '1px solid black' );
			this.fixedWidth = true;
		}
		
		this.normalSize = Math.floor( (this.container.getCoordinates().width)/ this.elmsContainers.length );
		this.last = this.container.getCoordinates().width  -( this.normalSize * ( this.elmsContainers.length-1 ));
		
		$each( this.elmsContainers, function(el, i) {
			if( el.id=='open' ) this.options.display = i;
			el.addEvent('mouseover', function() {
				this.options.display = i;
				this.start( 300 );
			}.bind(this) );
		}.bind(this) );
		
		this.container.addEvent( 'mouseleave', function() {
			this.last = this.container.getCoordinates().width  - ( this.normalSize * ( this.elmsContainers.length-1 ));
			this.options.display = null;
			this.start( 0 );
		}.bind(this) );
		
		this.start();
	},
	caculParams : function( ) {
	},
	start: function( duration ) {
		if ( duration ) this.fxs.options.duration = duration;
		if ( this.options.display!=null ) {
			this.displaySize = this.elms[this.options.display].getCoordinates().width-1;
			this.retractedSize = Math.floor(( this.container.getCoordinates().width - this.displaySize ) / (this.elmsContainers.length-1));
			this.last = this.container.getCoordinates().width  - ( this.retractedSize * ( this.elmsContainers.length-2 ) + this.displaySize );
		}
		var ml = 0;
		$each( this.elmsContainers, function(el, i) {
			 switch( this.options.display ) {
				 case i :
					this.params[i] = { width: this.displaySize+'px', 'margin-left': ml+'px'};
					ml += this.displaySize;
					break;
				 case null : 
					if( i == this.elms.length-1 && this.options.display!=this.elms.length-1) {
						this.params[i] = { width: this.last+'px', 'margin-left': ml+'px' };
						ml += this.last;
					}
					else {
						this.params[i] = { width: this.normalSize+'px', 'margin-left': ml+'px' };
						ml += this.normalSize;
					}
					break;
				 default : 
					if( i == this.elms.length-1 && this.options.display!=this.elms.length-1) {
						this.params[i] = { width: this.last+'px', 'margin-left': ml+'px'};
						ml += this.last;
					}
					else {
						this.params[i] = { width: this.retractedSize+'px', 'margin-left': ml+'px' };
						ml += this.retractedSize;
					}
			 }
		}.bind(this) );
		if (this.options.display==this.elms.length-1) {
			this.params[0]={ width: this.last+'px' };
			if( !this.fixedWidth ) {
				ml = this.options.maxContainerSize - 299;
				this.params[this.options.display] = { 'margin-left': ml+'px' };
			}
		}
		this.fxs.start( this.params );
	}
	
} );


kwicks.implement(new Options);// Implements setOptions(defaults, options)
window.addEvent( 'domready', function() { new kwicks(); } );
window.addEvent( 'load', function() { 
	if ( $('select') ) {
		var fx = new Fx.Styles('select', {duration: 1000, transition: Fx.Transitions.Back.easeOut});
		fx.start({ 'margin-left': '530px' });
	}
} );