Cufon.replace("#introduction h1, #news h1, #assortmentSales h1", { fontFamily: 'HighTowerText' });

var Slidebox = Class.create({
	initialize: function(element) {
		this.element = $(element);
		if (!this.element) return;
		
		this.options = Object.extend({
			height: 260,
			width: 482,
			photos: [],
			phpThumbUrl: '',
			zc: 1,  // zoom fit
			q: 100, // quality
			zIndex: 1,
			startDelay: 3,
			appearDuration: 1.4,
			delay: 6.5
		}, arguments[1] || {});
		
		this.photos = this.element.down('.photos');
		this.zIndex = this.options.zIndex;
		
		this.originalZ = this.options.zIndex;
		
		this.positions = [];
		
		this.options.photos.each(function(photo) {
			this.positions.push(photo.id);
		}.bind(this));
		
		this.startLoading();
	},
	
	startLoading: function() {
		var preloaded = 0;

		
		this.options.photos.each(function(photo) {
			var id = photo.id,
			    src = photo.image;
		
			var preload = new Image();
			preload.onload = function() {
				preloaded++;

				this.photos.insert(new Element('div', {
					className: 'photo',
					id: 'slidebox_' + id
				}).setStyle({
					backgroundImage: "url('" + this.options.phpThumbUrl + "?" + Object.toQueryString({
						src: src,
						w: this.options.width,
						h: this.options.height,
						q: this.options.q,
						zc: this.options.zc
					}) + "')",
					zIndex: this.zIndex,
					width: this.options.width + 'px',
					height: this.options.height + 'px'
				}).setOpacity(0));
				
				
				if (preloaded == this.options.photos.length) {
					// als er maar 2 designs zijn (1 + noimage) is 1 de geselecteerde
					this._selectedPhoto = this.options.photos[0].id;
					this.show(0, true);
					
					//return;
					
					this.element.setStyle({'visibility' : 'visible', zIndex: 1});
					if (this.options.photos.length > 1) {
						this.position = 0;
						//console.log(this.options.startDelay);
						
						(function() {
							if (!this.sliding) this.start();
							this.element.setStyle('visibility:visible;zIndex:0');
						}.bind(this)).delay(this.options.startDelay);
						
					}
				}

				preload.onload = Prototype.emptyFunction;
			}.bind(this);
			preload.src = photo.image;
		}.bind(this));
	},
	
	start: function() {
		this.sliding = true;
		//return;
		this.show(1);
		//this.next.bind(this).delay(this.options.delay);
	},
	
	next: function() {
		this.show(this.getSurroundingIndexes().next);
	},
	
	getSurroundingIndexes: function() {
	    var pos = this.position, length = this.options.photos.length;
	
		var previous = (pos <= 0) ? length - 1 : pos - 1,
		next = (pos >= length - 1) ? 0 : pos + 1;
		
		return { previous: previous, next: next };
	},

	show: function(position, instant) {
		this.position = position;
		
		var element = $('slidebox_' + this.options.photos[position].id);
		
		if (!element) return;
		
		if (this._showEffect) { 
			if (this._showEffect.element == element) return;
			this._showEffect.cancel();
		};
		this.zIndex++;
 
		element.setOpacity(0).setStyle({ zIndex: this.zIndex });
		
		this._showEffect = new Effect.Appear(element, {
			duration: instant ? 0 : this.options.appearDuration,
			afterFinish: function() {
				//console.log(element.siblings());
				element.siblings().invoke('setStyle', {
					zIndex: 1
				});
				element.setStyle({ zIndex: this.originalZ + 1 });
				if (this.sliding) this.next.bind(this).delay(this.options.delay);
			}.bind(this)
		});
	}
});