var fisheye = Class.create();
fisheye.prototype = {
	initialize: function(id,opt) {
		opt = (opt)?opt:{}
		items =  (opt.items)?opt.items:'li',
		this.position =  (opt.position)?opt.position:'top',
		this.proximity =  (opt.proximity)?opt.proximity:'100',
		this.gap =  (opt.gap)?opt.gap:0,
		this.id = id
		this.fisheye = $(id);
		allItems = $$('#' + id + ' ' + items);
		this.items = [];
		for (i=0; i<allItems.length ; i++ ) {
			this.items[i] = {};
			this.items[i].elem = allItems[i]
			var big = $$('#' + id + ' ' + items + ' .big')[i].getDimensions();
			//fle statische größen - firefox bug
			big.width = 160;
			big.height = 120;
			this.items[i].big = big
			this.items[i].big.ratio = this.items[i].big.width/this.items[i].big.height;
			var small = $$('#' + id + ' ' + items + ' .small')[i].getDimensions();
			//fle statische größen - firefox bug
      small.width = 80;
      small.height = 60;
			this.items[i].small = small
			var act = $$('#' + id + ' ' + items + ' .small')[i].getDimensions();
			this.items[i].act = act;
			this.items[i].act.Class = 'small';
		}
		this.render();
		Event.observe(document, "mousemove", this.getDistanz.bindAsEventListener(this), false);
	},

	getDistanz: function(event) {
		var pointer = {
			'x': event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)) || 0,
			'y' : event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)) || 0
		}
		for (i=0; i<this.items.length ; i++ ) {
			var newDim = distance = null
			this.items[i].act.pos = Position.cumulativeOffset(this.items[i].elem);
			this.items[i].act.dim = this.items[i].elem.getDimensions();
			//thats all the magic
			distance= Math.sqrt(Math.pow((this.items[i].act.pos[0] + this.items[i].act.dim.width/2)-pointer.x,2) + Math.pow((this.items[i].act.pos[1] + this.items[i].act.dim.height/2) - pointer.y,2))
			newDim =  (distance-this.items[i].act.dim.height/2)/this.proximity

			this.items[i].act.height = parseInt(this.items[i].big.height-newDim*this.items[i].big.height)
			this.items[i].act.width = parseInt(this.items[i].big.width-newDim*this.items[i].big.width)
			this.items[i].act.Class = 'scale';

			if(this.items[i].act.height <= this.items[i].small.height){
				this.items[i].act.height = this.items[i].small.height
				this.items[i].act.width = this.items[i].small.width
				this.items[i].act.Class = 'small'
			}
			if(this.items[i].act.height >= this.items[i].big.height){
				this.items[i].act.height = this.items[i].big.height
				this.items[i].act.width = this.items[i].big.width
				this.items[i].act.Class = 'big'
			}
		}
		this.render(0);
	},

	render: function(){
		this.left = -40;
		for (i=0; i<this.items.length ; i++ ) {
			var height = this.items[i].act.height;
			var width = this.items[i].act.width;

			this.items[i].elem.setStyle({
				'position':'absolute',
				'width':width + 'px',
				'height':height + 'px',
				'left':this.left+ 'px'
			});
			var pos = (this.position == 'top')?'top':'bottom';

			if(pos == 'top')
				this.items[i].elem.style.top = '0';
			else
				this.items[i].elem.style.bottom = '0';

			this.addClass(this.items[i].act.Class,this.items[i].elem)
			this.left = this.left +  width + this.gap;
		}
		var left =  700/2 - this.left / 2 + 'px';
		var width = this.left+ 'px';
		this.fisheye.setStyle({'left':left,'width':width});
	},

	addClass: function(newClass,elem){
		var classes = ['small','scale','big'];
		classes.each(function(c){
			if(c == newClass)
				elem.addClassName(newClass);
			else if(elem.hasClassName(c))
				elem.removeClassName(c)
		});
	}
}

function getPageSize(){
	var xScroll, yScroll;
	if (window.innerHeight && window.scrollMaxY) {
		xScroll = window.innerWidth + window.scrollMaxX;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}

	var windowWidth, windowHeight;

//	console.log(self.innerWidth);
//	console.log(document.documentElement.clientWidth);

	if (self.innerHeight) {	// all except Explorer
		if(document.documentElement.clientWidth){
			windowWidth = document.documentElement.clientWidth;
		} else {
			windowWidth = self.innerWidth;
		}
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}

	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else {
		pageHeight = yScroll;
	}

//	console.log("xScroll " + xScroll)
//	console.log("windowWidth " + windowWidth)

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){
		pageWidth = xScroll;
	} else {
		pageWidth = windowWidth;
	}
//	console.log("pageWidth " + pageWidth)

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
	return arrayPageSize;
}