window.addEvent('domready', function(){
	//new Menu($E('ul', 'menu'));
});

var Menu = new Class({
	initialize: function(menu, options) {
		this.setOptions(this.getOptions(), options);
		
		this.menu = $(menu);
		this.current = this.menu.getElement('li.this');
		
		if (this.options.swapimage) {
	 	this.imgPathes = [];
			this.menu.getElements('li').each(function(item){
						var img=$E('img',item);
						var src=img.getProperty('src');
      var ext = src.substring(src.lastIndexOf('.'));
						this.imgPathes.push(src);
				  this.imgPathes.push(src.replace(ext,this.options.suffix + ext));																					
			}.bind(this));
	 	var preloadedImages = new Asset.images(this.imgPathes);
			
			//current
			if (this.current) {
			var span=$E('span',this.current);
 			if (span) span.addClass('hover');
			 var img=$E('img',this.current);
			 var src=img.getProperty('src');
			 var ext = src.substring(src.lastIndexOf('.'));
			 img.src=src.replace(ext,this.options.suffix + ext);
			}
		}

		this.menu.getElements('li').each(function(item){
			item.addEvent('mouseover', function(item){
					if (!item.hasClass('this')) {
						var img=$E('img',item);
						var src=img.getProperty('src');
						var ext = src.substring(src.lastIndexOf('.'));
						img.src=src.replace(ext,this.options.suffix + ext);
						var span=$E('span',this.current);
 		  				if (span) span.addClass('hover');
					}
			}.bind(this,item));
			
			item.addEvent('mouseout', function(item){
					if (!item.hasClass('this')) {
						var img=$E('img',item);
						var src=img.getProperty('src');
						var suff = src.substring(src.lastIndexOf(this.options.suffix + '.'));
						var ext= src.substring(src.lastIndexOf('.'));
						img.src=src.replace(suff,ext);
						var span=$E('span',this.current);
						if (span) span.removeClass('hover');
					}
			}.bind(this,item));
		}.bind(this));
	},
	getOptions: function(){
		return {
			swapimage: true,
			suffix: '_f2'
		};
	}
});

Menu.implement(new Options);

var SlideList = new Class({
	initialize: function(menu, options) {
		this.setOptions(this.getOptions(), options);
		
		this.menu = $(menu), this.current = this.menu.getElement('li.this');
		
		if (this.options.swapimage) {
	 	this.imgPathes = [];
			this.menu.getElements('li').each(function(item){
						var img=$E('img',item);
						var src=img.getProperty('src');
      var ext = src.substring(src.lastIndexOf('.'));
				  this.imgPathes.push(src.replace(ext,'_f2' + ext));																								
			}.bind(this));
	 	var preloadedImages = new Asset.images(this.imgPathes);
			
			//current
			if (this.current) {
				var img=$E('img',this.current);
				var src=img.getProperty('src');
				var ext = src.substring(src.lastIndexOf('.'));
				img.src=src.replace(ext,'_f2' + ext);						
			}			
		}

		this.menu.getElements('li').each(function(item){
			item.addEvent('mouseenter', function(item){
					this.moveBg(item);
					
					if (!item.hasClass('this') && this.options.swapimage) {
						var img=$E('img',item);
						var src=img.getProperty('src');
						var ext = src.substring(src.lastIndexOf('.'));
						img.src=src.replace(ext,'_f2' + ext);
					}
			}.bind(this,item));
			item.addEvent('mouseleave', function(item){
     this.moveBg(this.current);
					
					if (!item.hasClass('this') && this.options.swapimage) {
						var img=$E('img',item);
						var src=img.getProperty('src');
						var suff = src.substring(src.lastIndexOf('_f2.'));
						var ext= src.substring(src.lastIndexOf('.'));
						img.src=src.replace(suff,ext);
					}
			}.bind(this,item));
			item.addEvent('click', function(event){ this.clickItem(event, item); }.bind(this));
		}.bind(this));
				
		this.back = new Element('li').addClass('background').adopt(new Element('div').addClass('left')).injectInside(this.menu);
		this.back.fx = this.back.effects(this.options);
		if(this.current) this.setCurrent(this.current);
	},
	
	setCurrent: function(el, effect){
		this.back.setStyles({left: (el.offsetLeft)+'px', width: (el.offsetWidth)+'px'});
		(effect) ? this.back.effect('opacity').set(0).start(1) : this.back.setOpacity(1);
		this.current = el;
	},
	
	getOptions: function(){
		return {
			//transition: Fx.Transitions.sineInOut,
			//duration: 500,
			//onClick: Class.empty
			wait: false,
	  transition: Fx.Transitions.backOut,
	 	duration: 700,
		 onClick: function(ev, item){ev.stop();},
			swapimage: false
		};
	},

	clickItem: function(event, item) {
		if(!this.current) this.setCurrent(item, true);
		this.current = item;
		//this.options.onClick(new Event(event), item);
	},

	moveBg: function(to) {
		if(!this.current) return;
		this.back.fx.custom({
			left: [this.back.offsetLeft, to.offsetLeft],
			width: [this.back.offsetWidth, to.offsetWidth]
		});
	}
});

SlideList.implement(new Options);