Fisheye = function ( left, top )
{

	var self = this;

	var container = document.createElement("div");
	container.className = "fishContainer";
	container.onmousemove = function (e) { self.mousemove.call( self, e ) };

	this.container = container;
	this.children = new Array();

	this.itemWidth = 45;
	this.itemHeight = 45;

	this.totalWidth = 0;

}


Fisheye.prototype = 
{

	add : function ( src, title, z ) 
	{
		var self = this;
		var img = document.createElement( "img" );
		img.style.position = "absolute";
		
		
		img.style.left = ( this.totalWidth + 5 ) + "px";
		img.style.top = "0px";
		
		img.oLeft = this.totalWidth + 5;
		img.oTop = 0;

		this.totalWidth += 10 + this.itemWidth; 

		img.style.width = this.itemWidth + "px";
		img.style.height = this.itemHeight + "px";
		img.onmouseover = function() { self.mouseoverItem.call( self, this ) };
		img.onmousemove = function () { self.mousemoveItem.call( self, this ) };
		img.onmouseout = function() { self.mouseoutItem.call( self, this ) };
	
		var caption = document.createElement( "div" );
		caption.innerHTML = title;
		caption.className = "fishTitle";
		img.caption = caption;
		img.onclick = function() { z.call(null,'here') };

		if( src )
		{
			img.source = true;
			if( document.body.filters )
			{
				img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"',  sizingMethod='scale')";
				img.src = "images/spacer.gif";
			}
			else
			{
				img.src = src;
			}
		}
		else
		{
			img.src = "images/spacer.gif";
			img.className = "fishItem";
		}
		this.children[this.children.length] = img;
		this.container.style.width = this.totalWidth + "px"
		this.container.appendChild( img );
		
	},

	show : function ( )
	{
		document.body.appendChild( this.container );
	},

	mouseoverItem : function ( elm ) 
	{

	},

	mouseoutItem : function ( elm ) 
	{
		if( elm.caption.parentNode == document.body )
			document.body.removeChild( elm.caption );
	},

	mousemoveItem : function ( elm ) 
	{
		var caption = elm.caption;
		if( caption.parentNode != document.body )
		{
			document.body.appendChild( caption );

		}

		var pos = getPosition( elm );

		caption.style.left = pos[0] + ( elm.clientWidth / 2 ) - ( caption.clientWidth / 2 ) + "px";
		caption.style.top = pos[1] + elm.clientHeight - 5 + "px";

	},

	mousemove : function ( e, elm )
	{
		e = e || event;
		this.keepmoving = false;
		var self = this;

		var width = this.container.clientWidth;
		var children = this.children;
		var childCount = children.length;

		var offsetX = ( e.clientX - parseInt( this.container.style.left ) );
		var offsetY = ( e.clientY - parseInt( this.container.style.top ) );

		// the width of the hotspot for the child
		var childWidth = width / childCount;
		var self = this;
		document.onmousemove = function( ) { self.mouseout.call( self, true ); };

		var affectedChild = parseInt( offsetX / childWidth );

		for( var i=0, zindx=20; i<childCount; i++ )
		{

			var diff = Math.abs( offsetX - ( childWidth / 2 + ( i * childWidth ) ) );

			var plusW = Math.pow( 2, -diff/childWidth ) * this.itemWidth;
			var plusH = Math.pow( 2, -diff/childWidth ) * this.itemHeight;

			children[i].style.width  =  this.itemWidth  + plusW + "px";  
			children[i].style.height =  this.itemHeight + plusH + "px";

			
			children[i].style.left = ( children[i].oLeft - ( plusW / 2 ))  + "px" ;
			children[i].style.top = ( children[i].oTop - ( plusH * 1.5 ))  + "px" ;

			children[i].style.zIndex =  ( i <= affectedChild ) ? ++zindx : --zindx;

		}

		stopPropagation( e );
		return false;
	},

	mouseout : function ( firstTime ) 
	{

		var container = this.container;
		var children = this.children;
		var childCount = children.length;

		if( firstTime )
		{
			document.onmousemove = null;
			for( var i=0; i<childCount; i++ )
			if( children[i].caption.parentNode == document.body )
				document.body.removeChild( children[i].caption );
		}


		if( firstTime || this.keepmoving )
		{

			this.keepmoving = true;
			var done = true;

			for( var i=0; i<childCount; i++ )
			{
				var width = parseInt( children[i].style.width );
				var height = parseInt( children[i].style.height );
				var left = parseInt( children[i].style.left );
				var top = parseInt( children[i].style.top );
				

				if( width > this.itemWidth )
				{
					children[i].style.width  =  ( ( width - 2 < this.itemWidth )? this.itemWidth : width - 2 ) + "px";
					done = false;
				}

				if( left < children[i].oLeft )
				{
					children[i].style.left = ( ( left + 1 > children[i].oLeft )? children[i].oLeft : left + 1 ) + "px" ;
					done = false;
				}

				if( height > this.itemHeight )
				{
					children[i].style.height = ( ( height - 2 < this.itemHeight )? this.itemHeight : height -2 ) + "px";
					done = false;
				}

				if( top < children[i].oTop )
				{
					children[i].style.top = ( ( top + 3 > children[i].oTop )? children[i].oTop : top + 3 )  + "px" ;
					done = false;
				}

			}

			if( !done )
			{
				var self = this;
				setTimeout( function(){ self.mouseout.call( self ); }, 20 );
			}		
		}	


	}	  

}
var counter = 0;