function Tooltip( el, id ){
	this.id = id;
	this.imgPosition = Position.cumulativeOffset(el);
	/*
	*
	*/
	this.get_samples = get_samples;
	this.create_list = create_list;
	this.tooltip_position = tooltip_position;
	


	this.DOM = DOMBuilder.apply();
	this.get_samples( id );
	Event.observe(el, "mousemove", eventHandlerFunction, false); 
	Event.observe(el, "mouseout", eventHandlerMouseout, false); 
}



function eventHandlerFunction(e) {
	 // the element that triggered the event
	 var element = Event.element(e);
	 // gets the mouse position
	 var mouseX = Event.pointerX(e),
		 mouseY = Event.pointerY(e);
	
	if( ( mouseX + 350 ) < getWindowWidth() ){
		$('tooltip').style.left = parseInt(mouseX + 30)+'px';
	}else{
		$('tooltip').style.left = parseInt(mouseX - 350)+'px';
	}
	
	if( ( mouseY + parseInt( $('tooltip').getDimensions().height )  ) < parseInt(getWindowHeight()) ){
		$('tooltip').style.top = ( parseInt(mouseY) + parseInt(30) ) + 'px';
	}else{
		$('tooltip').style.top = (parseInt(mouseY) - parseInt( $('tooltip').getDimensions().height + parseInt(30) ) ) + 'px';
	}
	
	
	 Event.stop(e);
}

function eventHandlerMouseout(e){
	$('tooltip').style.display = 'none';
	Event.stop(e);
	}

function tooltip_position(){
	$('tooltip').style.top  = this.imgPosition[1]+'px';
	$('tooltip').style.left = this.imgPosition[0]+'px';
	}

function get_samples( id ){
	new Ajax.Request('http://www.flooring2floors.co.uk/application/samples.php', {
		asynchronous:false,
		method:'post',
		parameters:{'id': id },
		onComplete: function(transport) {
			var result = eval( transport.responseText );
			this.create_list( result );
		}
	});
}



function create_list( json ){
	var Obj  = [];
	for(i = 0; i < json.length; i++){
		Obj[i] = this.DOM.LI(
				 	{ style:"background:url(http://www.flooring2floors.co.uk/images/qquote/"+json[i].image+"-rq.jpg); "}, 
					this.DOM.SPAN(	{}, 
						this.DOM.A({}, json[i].name )						 
					)
				 )
	}
	$('tooltip').innerHTML = '';
	$('tooltip').appendChild( 
			this.DOM.UL( { "class": 'tooltip', "id":'tt'}, Obj )
	);
	//$('tooltip').setOpacity(0.9);
	$('tooltip').style.display = 'block';
}
