Mootools diverse Classes

Hier ben ik weer met weer een nieuwe Mootools class. Met dezelfde vraag. Willen jullie deze eens testen in verschillende browsers? Ik heb het nu getest in Firefox 3.0.7, internet explorer 7 (waarvan hieronder de bevindingen) en Google Chrome

Een voorbeeldje

Tevens nog een paar vraagjes:

[li]weten jullie hoe ik het back button event van de browsers kan afvangen? Ik heb verschillende dingen geprobeerd maar ik krijg het nog niet helemaal werkend...[/li]
[li]In internet explorer 7 geeft hij bij het begin geen gekleurde afbeeldingen weer. Wel na het klikken. Hoe kan dit?[/li]
[li]Firefox gaat goed om met anchor namen met spaties. Internet explorer vervangt een spatie door '%'. Hoe zouden jullie dit oplossen?[/li]

Enkele highlights
[li]enkele items die al bezocht zijn staan in het array visited. Deze kan bijvoorbeeld door een cookie opgehaald worden (wordt nog aan gewerkt)[/li]
[li]Wanneer je bijvoorbeeld naar http://design.crispijnverkade.nl/cvStepSlider/#Blox gaat gaat hij ook direct naar de juiste pagina[/li]
[li]In dit geval worden de grijze afbeeldingen vervangen door de kleur afbeeldingen welke gedefineerd staan in het alt attribuut van de afbeeldingen. Zo krijgt je website steeds meer kleur - wat bij mij de bedoeling is :)[/li]

Todo
[li]Backbutton realiseren[/li]
[li]Visited opslaan in cookies[/li]
[li]vertical scrollen controleren[/li]
[li]navigation images bij eerste en laatste pagina aanpassen[/li]
[li]Jullie nog ideeën?[/li]

De class

/*
	Class:    	cvStepSlider
	Author:   	Crispijn Verkade
	Website:    http://crispijnverkade.nl
	Version:  	1.0
	Date:     	11/03/2009
	Built For:  MooTools 1.2.0
*/

var cvStepSlider = new Class({
	
	Implements: [Options,Events,Chain],

	options: {
		wrapper: 'portfolio_index',				//wrapper for the list elements
		list: 'items',							//select list 
		items: '#portfolio_index ul li img',	//select list elements
		itemWidth: 140,							//int pixels
		itemHeight: 105,						//int pixels
		startSlide: 1,							//slide to start
		type: 'horizontal',						//type of the slider
		nextbutton: 'next',
		prevbutton: 'prev',
		visited: ['#Vervandekade','#Young Dutch Design','#Blox','#PhilliShave']
	},
	
	initialize: function(options) {
		//set options
		this.setOptions(options);
		
		//define variables
		this.items = $$(this.options.items);
		this.wrapperHeight = 0;
		this.wrapperWidth = 0;
		this.offset = 0;
		this.slides = this.countSlides();
		this.slide = this.options.startSlide;
		this.images = []
		this.urls = [];
		this.history = [];
		this.visited = this.options.visited;
		
		//run the functions
		this.prepare();
	},
	
	prepare: function(){
		var self = this;
		var visited = this.visited;
		
		$(self.options.list).hide();
		
		$(this.options.nextbutton).addEvent('click', this.toNextPrev.bind(this,'next',[true]));
		$(this.options.prevbutton).addEvent('click', this.toNextPrev.bind(this,'prev',[true]));
		$(this.options.wrapper).addEvent('mousewheel', function(e){
			self.toNextPrev(e.wheel < 0 ? 'next' : 'prev');
		});
		window.addEvent('backbutton', function(e){
			self.goBack(e);
		});
		
		this.items.each(function(i){
			self.urls.push(i.getParent().getAttribute ('href'));
			self.images.push(i.getAttribute('src'),i.getAttribute('alt'));
			
			if(visited.contains(i.getParent().getAttribute ('href'))){
				i.setProperty('src', i.getProperty('alt'));
			}else{
				i.addEvents({
					'mouseenter' : function(){
						this.get('tween', {property: 'opacity', duration: 300}).start([.6,1]);//.addClass('item_hover');
					},
					'mouseleave' : function(){
						this.get('tween', {property: 'opacity', duration: 300}).start([1,.6]);//.removeClass('item_hover');
					},
					'click' : function(){
						this.get('tween', {property: 'opacity', duration: 2000}).start([.6,0]);
						this.setProperty('src', this.getProperty('alt'))
						this.get('tween', {property: 'opacity', duration: 1000, wait: 2000}).start([0,1]);
						
						self.addVisited(i);
					}
				});

				i.get('tween', {property: 'opacity', duration: 300}).start([1,.6]);
			}
		});
		
		var loading = new Asset.images(self.images, {
			onComplete: function(){
				$(self.options.wrapper).removeClass('loading');
				$(self.options.list).show();
				
				self.gotoItem();
				self.navInit();
			}
		});
		
	},
	
	goBack:function(e){		
		alert('back' + e);
	},
	
	countSlides: function(){
		this.wrapperWidth = $(this.options.wrapper).getWidth();
		this.wrapperHeight = $(this.options.wrapper).getHeight();
		
		return Math.ceil((this.items.length) / (this.wrapperWidth / this.options.itemWidth));
	},
	
	addVisited: function(e){
		this.visited.push(e.getParent().getAttribute ('href'));
		
		//write cookie?
		
		e.removeEvents('mouseleave');
		e.removeEvents('mouseenter');
	},
	
	gotoItem: function(){
		if(this.slide == 1){
			var url = document.location.hash.replace('#', '');
			if(url){
				var item = this.urls.indexOf('#' + url) + 1;
				this.slide = Math.ceil((item) / (this.wrapperWidth / this.options.itemWidth));
				
				this.toNextPrev(true,this.slide);
			}else{
				this.slide = 1;
			}
		}
	},
	
	navInit: function(){
		if(this.slide == 1){
			$(this.options.prevbutton).addClass('non_active');
		}if(this.slide == this.slides){
			$(this.options.nextbutton).addClass('non_active');
		}else{
			$(this.options.prevbutton).removeClass('non_active');
		}
	},
	
	toNextPrev: function(direction,slide){
		if(!slide){
			if(direction == 'next' && this.offset <= 0 && this.offset >= -(this.slides - 2) * this.wrapperWidth){
				if(this.options.type == 'horizontal'){
					this.offset = this.offset - this.wrapperWidth;
				}else if(this.options.type == 'vertical'){
					this.offset = this.offset - this.wrapperHeight;
				}
			}else if(direction == 'prev' && this.offset != 0){
				if(this.options.type == 'horizontal'){
					this.offset = this.offset + this.wrapperWidth;
				}else if(this.options.type == 'vertical'){
					this.offset = this.offset + this.wrapperHeight;
				}
			}
		}else{
			this.offset = -(slide.toInt() * this.wrapperWidth) + this.wrapperWidth;
		}
		
		this.navInit();
		
		var myEffect = new Fx.Tween($(this.options.list));
		myEffect.start('margin-left', this.offset);
	}	
});

edit
preloaden afbeeldingen gefixt

Niemand ideeën of suggesties of foutmeldingen.... :)