// show real pics from thumbs
var ImageView = {
	
	
	loadingUrl: '/img/loadingAni.gif',
	image:		null,
	images:		{},
	pictures:	{},
	showDelay:  false,
	event:		null,
	imageLoadedBlind: false,
	
	
	
	init:		function(data)	{
		
		if (!data)	data = this.data;
		
		// if not exist, add layer to dom
		if (!$('ImageView_layer'))	{
			var ImageView_layer = new Element('div');
			ImageView_layer.id = 'ImageView_layer';
			//ImageView_layer.setStyle('display','none');
			//ImageView_layer.setStyle('position','absolute');
			ImageView_layer.setStyles({display: 'none', position: 'absolute'});
			document.body.appendChild(ImageView_layer);
			
			this.image = new Element('img');
			this.image.injectInside('ImageView_layer');
			this.image.src = this.loadingUrl;
			
			this.imageBlind = new Element('img');
			this.imageBlind.setStyle('display','none');
			this.imageBlind.injectInside('ImageView_layer');
			this.imageBlind.src = this.loadingUrl;
			
			// inject span after image
			var span = new Element('div');
			span.id = 'ImageComment';
			span.setStyle('width','300px');
			span.injectInside('ImageView_layer');
			
		};
		for(var i=0; i < data.length; i++)	{
			var id = data[i].pictureID;
			this.pictures[id] = data[i];
			$('profilePicture_' + id).addEvent('mouseover', this.mouseOverStart.bindAsEventListener(this, id));
			$('profilePicture_' + id).addEvent('mouseout', this.mouseOut.bindAsEventListener(this, id));
			$('profilePicture_' + id).addEvent('mousemove', this.mouseMove.bindAsEventListener(this, id));
		}
		
		
	},

	
	mouseOverStart:		function(ev, id)	{
		// waits a couple of time before showing
		// image
		$clear(this.showDelay);	// clear if another function is waiting
		var event = new Event(ev);
		this.event = event;
		this.showDelay = this.mouseOver.bind(this, [event,id]).delay(250);
		
	},
		
	imageLoaded:	function()	{
		var event = this.event;
		var id = null;
		this.image.src = this.imageBlind.src;
		this.move(event, id);
	},
	
	loadBlind:		function(id)	{
		this.imageBlind.src = this.images[id].src;
		if (window.opera)	{
			this.imageLoadedBind.delay(800);
		}
	},
	
	mouseOver:	function(event,id)	{
		this.showDelay = false;
		// check if image already loaded and in dom
		if (!this.images[id])	{
			// create new image
			this.image.src = this.loadingUrl;
			this.images[id] = new Image();
			this.images[id].src = this.pictures[id].url;	
			
			if (!this.imageLoadedBindDone) 	{
				this.imageLoadedBind  = this.imageLoaded.bind(this);
				this.imageLoadedBindDone = true;
				this.imageBlind.addEvent('load', this.imageLoadedBind);
			}
			this.loadBlind(id);
			
			
			
		} else {
			this.image.src = this.images[id].src;
		}
		
		// show comment
		var comment = this.pictures[id].comment;
		if (comment != undefined && comment.length > 0)	{
			$('ImageComment').innerHTML = comment;
			$('ImageComment').removeClass('hide');
		} else {
			$('ImageComment').addClass('hide');
		}
		
		this.move(this.event, id);
		$('ImageView_layer').setStyle('display','block');
		this.move(this.event, id);
		
	},
	
	mouseOut:	function(ev,id)		{
		// evtl. clear time
		$clear(this.showDelay);
		this.showDelay = false;
		var styles = { display: 'none'};
		this.image.src = this.loadingUrl;
		$('ImageView_layer').setStyles(styles);
	},
	
	mouseMove:	function(ev, id)	{
		// time still 'active', to nothing, only reset ev
		var event = new Event(ev);
		this.event = event;
		if (this.showDelay)	{
			return;
		} 
		this.move(event,id);	// or moveover-fired, so just move
		
	},
	
	move:	function(event, id)	{
		// var pageX = event.page.x + 10;
		var pageX = this.getNewX(event, id);
		var pageY = this.getNewY(event, id);
		var styles = { left: pageX + 'px', top: pageY + 'px' };
		$('ImageView_layer').setStyles(styles);
	},
	
	getNewY:	function(event, id)	{
		var screenHeight = window.opera ? window.innerHeight : window.getHeight();
		var offsetHeight = $('ImageView_layer').offsetHeight;
		if (event.client.y + offsetHeight > screenHeight - 10 )	{
			// try to return smaller y and top of the mouse
			var difference = event.client.y + offsetHeight - screenHeight;
			var newY = event.page.y - difference - 10;
			return newY;
		} else {
			return event.page.y;
		}
	},
	
	getNewX:	function(event, id)	{
		var screenWidth = window.getWidth();
		var offsetWidth = $('ImageView_layer').offsetWidth;
		if (event.client.x + offsetWidth + 10 >= screenWidth)	{
			var difference = event.page.x - offsetWidth - 10;
			var newX = event.page.x - offsetWidth - 10;
			return newX;
		} else {
			return event.page.x + 10;
		}
		
	}
	
	
	
	
}