var request = null;
function addQuickLookEvent(el){
	el.addEvent('mouseenter',fireQuickLook.bind(el));
}

function fireQuickLook(e){
	var el = this;
	console.log(el)
	new Event(e).stop();
	createQuickLook(el);
}

function createQuickLook(el){
	hideQuickLook();
	var quickLook = new Element('div',{
		'id': 'quickLook_'+ el.id,
		'class': 'ql_container'
	});
	quickLook.addClass('loading');
	window.quickLook = quickLook;
	window.quickLook.inject($(document.body));
	setPosition(el);
	
	var elementId = el.id.split('productID_')[1];
	var requestParameters = {'event':'product.load.ajax','productid':elementId};
	request = new Request({
		url:'/index.cfm',
		method: 'post',
		autoCancel:true,
		onRequest: function(){
			window.quickLook.setStyle('background','url(./resources/images/loading.gif) no-repeat center');
		},
		onSuccess: createQuickLookContent.bind([el])
	}).get(requestParameters);
	
	
}

function createQuickLookContent(response){
	var el = this[0];
	
	window.quickLook.removeClass('loading');
	window.quickLook.empty();
	
	var item = JSON.decode(response.trim(),true);
	
	var clear = new Element('div',{
		'class':'clear',
		'html':' '
	});
	
	var content = new Element('div',{
		'class' : 'ql_content',
		'styles':{
			'opacity':0
		}
	});
	var qlWrapper = new Element('div',{
		'class':'ql_wrapper'
	});
	qlWrapper.inject(window.quickLook);
	
	content.inject(qlWrapper);
	
	
	var nw = new Element('div',{
		'class' : 'ql_nw',
		'html' : ' '
	});
	nw.inject(qlWrapper,'top');
	var sw = new Element('div',{
		'class' : 'ql_sw',
		'html' : ' '
	});
	sw.inject(nw,'after');
	
	var ne = new Element('div',{
		'class' : 'ql_ne',
		'html' : ' '
	});
	ne.inject(content,'after');
	var se = new Element('div',{
		'class' : 'ql_se',
		'html' : ' '
	});
	se.inject(ne,'after');
	

	var itemName = new Element('h3',{
		'class':'ql_name',
		'html':item.product.productname
	});
	itemName.inject(content);
	
	var itemSku = item.sku;
	var itemTech = item.techspech;
	
	var itemDesc = new Element("p",{
		'class':'ql_desc',
		'html': item.product.producttag.toUpperCase()
	});
	itemDesc.inject(content);
	
	//console.log(item);
	for( i = 0; i < item.productvariations.recordcount; i++){
		var swatch = new Element('a',{
			'class': 'swatch button',
			'styles':{
				'background':'url(./resources/images/swatches/'+item.productvariations.data.FILENAME[i]+') no-repeat top left'
			},
			'events':{
				'mouseenter': enterSwatch,
				'click': swatchClick
			},
			'html': '&nbsp;',
			'href': '#'
		});
		if(i == 0){
			swatch.addClass('first');
		} 
		else if(i == (item.productvariations.recordcount - 1) && item.productvariations.recordcount > 2){
			swatch.addClass('last');
		}
		swatch.inject(content);
	}
	clear.inject(content);
	
	window.quickLook.removeProperty('style');
	setPosition(el);
	if(content.getStyle('opacity') == 0){
		content.fade('in');
	}
}

function setPosition(el){
	window.quickLook.setStyles({
		'width': el.getCoordinates().width + 20,
		'left': el.getCoordinates().left,
		'top': el.getElement('img').getCoordinates().bottom + 9
	});
}

function hideQuickLook(){
	if(request){
		request.cancel();
	}
	if(window.quickLook){
		lastQuickLook = window.quickLook.dispose();
		window.quickLook = null;
	}
}

function enterSwatch(){
	//console.log(this);
}

function swatchClick(e){
	new Event(e).stop();
	//console.log(this);
}