var MenuToggle = new Class( {
	initialize: function ( trigger, target, options ) {
		this.trigger = $( trigger );
		this.target = $( target );
		this.options = options || {};
		this.options.align = this.options.align || 'left';
		this.options.classNames = this.options.classNames || { expanded: '', contracted: '' };
		this.options.classNames.expanded = this.options.classNames.expanded || '';
		this.options.classNames.contracted = this.options.classNames.contracted || '';
		this.options.images = this.options.images || { expand: '', contract: '' };
		this.options.images.expand = this.options.images.expand || '';
		this.options.images.contract = this.options.images.contract || '';
		this.options.beginState = this.options.beginState || 'contracted';
		this.images = {};
		this.slide = {};
		this._addToggler();
		this._initTarget();
	},
	
	_preloadTogglerImages: function () {
		if( this.options.images.expand.length ) {
			this.images.expand = new Image();
			this.images.expand.src = this.options.images.expand;
		}
		if( this.options.images.contract.length ) {
			this.images.contract = new Image();
			this.images.contract.src = this.options.images.contract;
		}
	},
	
	_addToggler: function () {
		this.trigger.setStyle( 'list-style-image', 'none' );
		this.link = new Element( 'a', {} );
		this.link.slide = new Fx.Slide( this.target );
		this.link.classNames = this.options.classNames;
		this.link.images = this.images;
		this.link.state = '';
		this.link.addEvent( 'click', function() { 
			this.slide.toggle();
			switch( this.state ) {
				default:
				case 'expanded':
					if( this.images.contract ) {
						this.innerHTML = '';
						this.appendChild( this.images.contract );
					} else {
						this.innerHTML = '-';
					}
					break;
					
				case 'contracted':
					if( this.images.expand ) {
						this.innerHTML = '';
						this.appendChild( this.images.expand );
					} else {
						this.innerHTML = '+';
					}
					break;
			}
			this.toggleClass( this.classNames.expanded );
			this.toggleClass( this.classNames.contracted );
		} );
		
		this._preloadTogglerImages();
		switch( this.options.beginState ) {
			default:
			case 'contracted':
				// use "expand" image
				if( this.images.expand ) {
					this.link.appendChild( this.images.expand );
				} else {
					this.link.innerHTML = "+";
				}
				this.trigger.removeClass( this.link.classNames.expanded );
				this.link.removeClass( this.link.classNames.expanded );
				this.trigger.addClass( this.link.classNames.contracted );
				this.link.addClass( this.link.classNames.contracted );
				break;
				
			case 'expanded':
				// use "contract" image
				if( this.images.contract ) {
					this.link.appendChild( this.images.contract );
				} else {
					this.link.innerHTML = "-";
				}
				this.trigger.removeClass( this.link.classNames.contracted );
				this.link.removeClass( this.link.classNames.contracted );
				this.trigger.addClass( this.link.classNames.expanded );
				this.link.addClass( this.link.classNames.expanded );
				break;
		}
		switch( this.options.align ) {
			default:
			case 'left':
				// injectBefore
				this.link.injectTop( this.trigger );
				break;
			
			case 'right':
				// injectAfter
				this.link.injectInside( this.trigger );
				break;
		}
		
	},
	
	_initTarget: function () {
		switch( this.options.beginState ) {
			default:
			case 'contracted':
			case 'hide':
			case 'hidden':
				this.link.slide.hide();
				break;
				
			case 'expanded':
			case 'show':
			case 'visible':
				this.link.slide.show();
				break;
		}
	}
} );

window.addEvent( 'domready', function() {
	var trigger = $( 'toggler' );
	var target = trigger.getElement( 'ul' );
	var beginState =  window.location.href.contains( '/store' ) ? 'expanded' : 'contracted';
	var options = {
		'align': 'left',
		'classNames': { 
			'expanded': 'menutoggleExpanded', 
			'contracted': 'menutoggleContracted' 
		},
		'images': {
			'expand': '/images/expand.gif',
			'contract': '/images/contract.gif'
		},
		'beginState': beginState
	}
	var mt = new MenuToggle( trigger, target, options );
} );