Event.observe(window, 'load', function() { refBox = new referenceBox(); } );

var referenceBox = Class.create( {
	initialize : function() {
		this.pic = $('newReference');
		this.link = this.pic.parentNode;
		this.con = this.pic.parentNode;
		this.fps = 25;
		this.zoomTime = 0.5;
		this.path = 'global/images/refs/';
		this.refs = referenz_bilder;//new Array('hoyer1.jpg', 'hoyer2.jpg');
		this.changeDelay = 5;
		this.changeTime = 1;
		
		this.setPic(this.getNewPic());
		this.initChange();
		
//		this.changePic.bindAsEventListener(this);
		
/*		this.observeMove = this.move.bindAsEventListener(this);		
		Event.observe(this.con, 'mouseover', this.focus.bindAsEventListener(this));
		Event.observe(this.con, 'mouseout', this.blur.bindAsEventListener(this));
		Event.observe(this.con, 'mousemove', this.setXY.bindAsEventListener(this));*/
	},
	
/*	setXY : function(event) {
		this.mouseX = Event.pointerX(event);
		this.mouseY = Event.pointerY(event);
	},*/
	
	setPic : function(ref, func) {
		src = ref['image'];
		id = ref['id'];
		img = new Image();
		img.src = this.path + src;
		var t = this;
		var pro = setInterval( function() {
			if(img.complete) {
				clearInterval(pro);
				
				div = document.createElement('div');
				div.style.height = '0px';
				div.style.overflow = 'hidden';
				div.appendChild(img);
				document.body.appendChild(div);
				t.imgHeight = img.offsetHeight;
				t.imgWidth = img.offsetWidth;		
				document.body.removeChild(div);
				
				t.resizedHeight = t.pic.offsetHeight;	
				t.zoomStep = (t.imgHeight - t.resizedHeight) / (t.fps * t.zoomTime);
				t.pic.src = t.path + src;
				t.link.href = t.link.href.replace(/refs_id=(\d+)/, 'refs_id='+id); 
				
				if (func) func();
			}
		}, 50 );
		
		
/*		new Effect.Fade(this.pic, { duration: 1, afterFinish: function() {
			t.pic.src = t.path + src;
			new Effect.Appear(t.pic, { duration: 1 } );
			} } );*/
	},
	
/*	focus : function(event) {
		if (this.inChange) return;
		if (this.zoom) this.zoom.stop();
		if (this.change) this.change.stop();
		var t = this;	
		new PeriodicalExecuter( function(pe) {
			t.zoom = pe;
			t.pic.style.height = t.pic.offsetHeight + t.zoomStep + 'px';
			var coords = t.getXY();
			t.pic.style.left = coords['x'] + 'px'; 
			t.pic.style.top = coords['y'] + 'px';
			if (t.pic.offsetHeight >= t.imgHeight) {
				pe.stop();
				t.initMove();
				t.pic.style.height = t.imgHeight + 'px';
			}
		}, 1/this.fps);
	},
	
	blur : function() {
		if (this.inChange) return;
		if (this.zoom) this.zoom.stop();
		this.stopMove();
		var t = this;
		this.stepTop = Math.ceil(this.pic.offsetTop / (this.fps * this.zoomTime));
		this.stepLeft = Math.ceil(this.pic.offsetLeft / (this.fps * this.zoomTime));
			
		new PeriodicalExecuter( function(pe) {
			t.zoom = pe;
			t.pic.style.height = t.pic.offsetHeight - t.zoomStep + 'px';
			if (t.pic.offsetTop < 0) t.pic.style.top = t.pic.offsetTop - t.stepTop + 'px';
			if (t.pic.offsetLeft < 0) t.pic.style.left = t.pic.offsetLeft - t.stepLeft + 'px';
			
			if (t.pic.offsetHeight <= t.resizedHeight) {
				t.zoom.stop();
				t.pic.style.height = t.resizedHeight + 'px';
				t.pic.style.left = '0px';
				t.pic.style.top = '0px';
				t.initChange();
			}			
		}, 1/this.fps);
	},
	
	initMove : function() {
		Event.observe(this.con, 'mousemove', this.observeMove);
	},
	
	stopMove : function() {
		Event.stopObserving(this.con, 'mousemove', this.observeMove);		
	},
	
	move : function() {
		if (this.inChange) return;
		var con = Element.viewportOffset(this.con);
		var coords = this.getXY();
		this.pic.style.left = coords['x'] + 'px'; 
		this.pic.style.top = coords['y'] + 'px';
	},
	
	getXY : function() {
		var con = Element.viewportOffset(this.con);
		
		var x = (this.mouseX - con.left) / this.con.offsetWidth;
		var y = (this.mouseY - con.top) / this.con.offsetHeight;
			
		var ret = new Array();
		ret['x'] = -(this.pic.offsetWidth - this.con.offsetWidth) * x;
		ret['y'] = -(this.pic.offsetHeight - this.con.offsetHeight) * y;
		
		return ret;		
	},*/
	
	initChange : function() {
		this.change = new PeriodicalExecuter(this.changePic.bindAsEventListener(this), this.changeDelay);		
	},
	
	changePic : function() {
		this.inChange = true;
		ref = this.getNewPic();
		this.change.stop();
		var t = this;
		new Effect.Fade(this.pic, { duration: this.changeTime, afterFinish: function() {
			t.setPic(ref, function() {
				new Effect.Appear(t.pic, { duration: t.changeTime, afterFinish: function() {
					t.initChange();
					t.inChange = false;
					} } );				
				} );
			} } );
	},
	
	getNewPic : function() {	
		var ref = this.refs.shift();
		this.refs.push(ref);
		return ref;
	}
} );