var ImageMenu = new Class(
	{
		initialize: function(container, elements, options) {
			// container is the ul.menu tag
			// elements are the li tags
			this.container = container;
			this.elements = this.container.getChildren().filterByTag('li');
			this.itemcount = this.elements.length;
			this.currentitem = -1;
			this.setOptions(this.getOptions(), options);
			this.container.setStyle('display','block')
			this.calculatePositions();
			this.container.setStyle('position','relative');
			this.container.setStyle('height',this.options.height);
//			this.presentfx = new Fx.Styles ( this.container, { duration:2000, wait:false, transition: Fx.Transitions.Elastic.easeInOut, fps:30 } );
//			this.presentfx.start( { 'height': this.options.height, 'border-top-width': '56px' } );
			this.fx = new Array ();
			this.lfx = new Array ();
			this.elements[0].setStyle('border-left','none');
			this.elements.each(
				function( el, i ) {
					this.fx[i] = new Fx.Styles ( el, { duration:250, wait:false, transition: Fx.Transitions.Sine.easeOut, fps:30 } );
					if ( i > 0 ) {
						this.elements[i].setStyle('border-left','10px solid #000');
					}
					el.setStyle ( 'position', 'absolute' );
					el.setStyle ( 'width', this.expandedwidth );
					el.setStyle ( 'height', 200 );
					el.setStyle ( 'z-index', 100 + i );
					if ( this.currentitem >= 0 ) {
						if ( i == this.currentitem ) {
							el.setStyle ( 'left', this.expandedPositions[i] ); this.states[i] = 'expanded';
						} else {
							if ( i < this.currentitem ) {
								el.setStyle ( 'left', this.compressedLeftPositions[i] ); this.states[i] = 'compressedLeft';
							} else {
								el.setStyle ( 'left', this.compressedRightPositions[i] ); this.states[i] = 'compressedright';
							}
						}
					} else {
						el.setStyle ( 'left', this.normalPositions[i] ); this.states[i] = 'normal';
					}
					el.setStyle ( 'top', 0  );
					el.setStyle ( 'bottom', 0  );
					el.addEvent( 'mouseenter', function( e ) { new Event ( e ).stop(); this.expandItem ( i ); }.bind ( this ) );
				}.bind( this )
			);
			for ( var i = this.itemcount - 1; i >= 0; i-- ) {
				this.elements[i].setStyle ( 'display', 'block' );
			}
			this.container.addEvent( 'mouseleave', function ( e ) { new Event ( e ).stop(); this.normalizeMenu ( ); }.bind( this ) );
			window.addEvent( 'resize', function ( e ) { this.calculatePositions ( ); this.normalizeMenuNow ( ); }.bind( this ) );
		},
		getOptions: function ( ) { return { duration: 250, height: 200, expandedwidth: 300 }; },
		calculatePositions: function ( ) {
			this.normalPositions = new Array ();
			this.compressedLeftPositions = new Array ();
			this.compressedRightPositions = new Array ();
			this.expandedPositions = new Array ();
			this.normalwidths = new Array ();
			this.expandedwidths = new Array ();
			this.compressedwidths = new Array ();
			this.states = new Array ();
			this.totalwidth = this.container.getSize().size.x;
			this.expandedwidth = this.options.expandedwidth;
			this.normalwidth = ( this.totalwidth / this.itemcount );
			this.compressedwidth = ( this.totalwidth - this.options.expandedwidth ) / ( this.itemcount - 1 );
			//if ( this.compressedwidth > this.expandedwidth ) { this.compressedwidth = this.expandedwidth; }
			this.currentitem = -1;
			for ( var i = 0; i < this.itemcount; i++ ) {
				if ( this.elements[i].getAttribute('id') == 'current' ) { this.currentitem = i; }
				if ( this.elements[i].hasClass('active') ) { this.currentitem = i; }
				this.normalPositions[i] = ( i * this.normalwidth );
				this.compressedLeftPositions[i] = ( i * this.compressedwidth );
				this.compressedRightPositions[i] = this.totalwidth - ( ( this.itemcount - i ) * this.compressedwidth );
				this.expandedPositions[i] = this.compressedwidth * i;
				if ( this.compressedRightPositions[i] < this.normalPositions[i] ) { this.compressedRightPositions[i] = this.normalPositions[i]; }
				if ( this.compressedLeftPositions[i] > this.normalPositions[i] ) { this.compressedLeftPositions[i] = this.normalPositions[i]; }
				if ( this.expandedPositions[i] > this.normalPositions[i] ) { this.expandedPositions[i] = this.normalPositions[i]; }
				this.normalwidths[i] = this.normalwidth;
				this.expandedwidths[i] = this.expandedwidth;
				this.compressedwidths[i] = this.compressedwidth;
				this.states[i] = 'normal';
			}
		},
		expandItem: function ( itemnumber ) {
			this.elements.each ( 
				function ( el, i ) {
					if ( i == itemnumber ) {
						if ( this.states[i] != 'expanded' ) {
							this.fx[i].stop();
							this.fx[i].start( { 'left': this.expandedPositions[i] } );
							this.states[i] = 'expanded';
						}
					} else {
						if ( i < itemnumber ) {
							if ( this.states[i] != 'compressedLeft' ) {
								this.fx[i].stop();
								this.fx[i].start( { 'left': this.compressedLeftPositions[i] } );
								this.states[i] = 'compressedLeft';
							}
						} else {
							if ( this.states[i] != 'compressedright' ) {
								this.fx[i].stop();
								this.fx[i].start( { 'left': this.compressedRightPositions[i] } );
								this.states[i] = 'compressedright';
							}
						}
					}
				}.bind(this)
			)
		},
		normalizeMenu: function ( ) {
			if ( this.currentitem >= 0 ) {
				this.expandItem(this.currentitem);
			} else {
				this.elements.each ( 
					function ( el, i ) {
						this.fx[i].start( { 'left': this.normalPositions[i] } );
						this.states[i] = 'normal';
					}.bind(this)
				);
			}
		},
		expandItemNow: function ( itemnumber ) {
			this.elements.each ( 
				function ( el, i ) {
					if ( i == itemnumber ) {
						if ( this.states[i] != 'expanded' ) {
							this.fx[i].stop();
							el.setStyle('left',this.expandedPositions[i]);
							this.states[i] = 'expanded';
						}
					} else {
						if ( i < itemnumber ) {
							if ( this.states[i] != 'compressedLeft' ) {
								this.fx[i].stop();
								el.setStyle('left',this.compressedLeftPositions[i]);
								this.states[i] = 'compressedLeft';
							}
						} else {
							if ( this.states[i] != 'compressedright' ) {
								this.fx[i].stop();
								el.setStyle('left',this.compressedRightPositions[i]);
								this.states[i] = 'compressedright';
							}
						}
					}
				}.bind(this)
			)
		},
		normalizeMenuNow: function ( ) {
			if ( this.currentitem >= 0 ) {
				this.expandItemNow(this.currentitem);
			} else {
				this.elements.each ( 
					function ( el, i ) {
						this.fx[i].stop();
						el.setStyle('left',this.normalPositions[i]);
						this.states[i] = 'normal';
					}.bind(this)
				);
			}
		}
	}
);

ImageMenu.implement(new Options);

var applyImageMenu = new Class(
	{
		initialize: function() {
			var selector = '.slidingpanel .menu';
			var objs = $$(selector);
			objs.each(
				function ( obj ) { 
					new ImageMenu( obj, obj.getChildren().filterByTag('li'), {  } );
				},
				this
			);
		}
	}
);
window.addEvent( 'domready', function() { document.applyslidingpanel = new applyImageMenu(); } );