var Balloon = Class.create();
Balloon.prototype = {
	
	element: undefined,
	iterator: 0,
	containerImage: undefined,
	image: undefined,
	coordX: 0,
	coordY: 0,
	defaultContainerWidth: 500,
	defaultContainerHeight: 570,
 
	
	initialize: function(element, iterator) {
		
		this.element = $(element);
		this.iterator = iterator;
		
		this.preloadImage();
		
		Event.observe(this.element, 'mousemove', function(e) { this.drawImage(e); }.bindAsEventListener(this));
	 	Event.observe(this.element, 'mouseout', function(e) { this.clearImage(); }.bindAsEventListener(this));
	 	
	},
	
	drawImage: function (e) {
		
		this.clearImage();
		if(!e) e = window.event;
	 
		this.coordX = Event.pointerX(e);
		this.coordY = Event.pointerY(e);
	
		if(typeof(this.containerImage) == 'object') {
			this.clearImage();
		}
		
		this.setImageDimensions();
		this.detectOrientation();
	 
		this.containerImage = new Element('div', {});
	 	this.containerImage.setStyle({
	 		position: 'absolute',
	 		top:     this.coordY+40 +'px',
	 		left:    this.coordX+40 +'px',
	 		maxWidth:   this.defaultContainerWidth+'px',
	 		//height:  this.defaultContainerHeight+'px',
	 		margin:  '0px auto',
			textAlign: 'center',
	 		backgroundColor: '#fff',
	 		border: '5px solid #EEF3F6'
	 	});
	 	
	 	if(!this.containerImage.firstChild) {
			var text = this.element.alt;
			var textContainer = new Element('div', { className: 'balloonTitle'});
			textContainer.update(text);	
			this.containerImage.appendChild(textContainer);		
			this.containerImage.appendChild(this.image);
			
		}
		
		document.body.appendChild(this.containerImage);
	},
	
	clearImage: function () {	
		 	 		
			try {
				this.containerImage.remove();
			} catch(e) {};		 
			 
	},
	
	detectOrientation: function() {	 
		
		  
		 
		   var viewport2 = document.viewport.getScrollOffsets();
		   var viewport = this.element.cumulativeOffset();

			var width = window.screen.width;
			var height = window.screen.height;			 		 
		
			//var itemContainer =  $('auctionsUpdate');
			var itemContainer = $(document.body);
			if(typeof(itemContainer) == 'object')	{
				var itemContainerWidth = itemContainer.getWidth();
				
			}
			
			if(!itemContainerWidth) itemContainerWidth = 1280;
		 
			if(viewport.left >= itemContainerWidth / 2) {
				this.coordX = 50;
				if(Prototype.Browser.IE) 
					this.coordY = viewport2.top + 20;				
				else this.coordY = 20;
				
			} else {
				this.coordX = width - this.defaultContainerWidth - 100;
				 
				if(Prototype.Browser.IE) 
					this.coordY = viewport2.top+ 20;
				else this.coordY = 20;
			}
			
			 
		  
	},


	setImageDimensions : function() {
		
		// this is default width & height for 800 or less resolution
		var newWidth = 280;
		var newHeight = 280;
		var offsetTop = 20;
		
		if(window.screen.width <= 800) {
			newHeight = 400;
			newWidth  = 400;
			offsetTop = 30;			
			
		} else if(window.screen.width > 1024) {
			newHeight = 500;
			newWidth  = 500;
			offsetTop = 54;
		}			
		
		if(this.image.width > newWidth) {
			var aspect = this.image.width / this.image.height;
		  if(aspect >= 1) {
			this.image.width = newWidth;
			this.image.height = newWidth / aspect;
		  } else {
		  	this.image.height = newHeight;
			this.image.width =  newHeight * aspect;
		  }
		}
		
		this.defaultContainerHeight = this.image.height + offsetTop;
		this.defaultContainerWidth = this.image.width + offsetTop;
		
		 
	},
	
	preloadImage: function() {
		this.image = new Image();
		this.image.src = this.element.src.replace(/thumb_/, '');			
	}
	
};

Event.observe(window, 'load', function() {
	var elements = $$(".big_image");
 	
	elements.each(function(item, iterator){		 
		new Balloon(item, iterator);			 
	});	
	
}.bindAsEventListener(this));