if (!window.BaobazQuicklook)
var BaobazQuicklook = new Object(); 

BaobazQuicklook.Methods = {
	
	options: {
		quicklookElement: '.quicklook', 	// element on wich the quicklook is applied (need a productid attribute)
		useOverlay: true, 					// use overlay
		overlayClose: true, 				// Close quicklook by clicking on overlay
		quicklookClose: false,				// Close quicklook by clicking on quicklook
		//elementOpenQL: false,				// use the image click to open the QL 
		QLposition: 'center',   	        // 'center'  'relativeCenter'  or 'relativeOffset'
									  		// 'center' : middle of screen
											// 'relativeCenter' : center on the product
											// 'relativeOffset' : top/left of the product (customise with the following offset)
		QLpostionOffsetX:-9,
		QLpostionOffsetY:-16,
		
		width: 500, 						// width in px of Quicklook window
		height: 90, 						// height in px of Quicklook window
		overlayOpacity: 0.5, 				// overlay opacity
		overlayDuration: 0.25, 				// overlay fade in/out duration in seconds
		fadeInDuration: 0.5, 				// quicklook fade in duration in seconds
		fadeOutDuration: 0.5, 				// quicklook fade out duration in seconds
		transitions: true, 				// use transitions
		quicklookButtonString: "quicklook",	//
		loadingString: "Loading...", 		// loading string message
		closeString: "Close window", 		// title attribute for close window link
		closeValue: "×" 				// string for close link 
	},
	
	_options: new Object,
	setOptions: function(options) {
		Object.extend(this.options, options || {});
	},

	init: function() {
		
		
		$$('#baobaz_quicklookoverlay').invoke('remove');
		$$('#baobaz_quicklookwindow').invoke('remove');
		$$('#baobaz_quicklooindicator').invoke('remove');
		
		if(this.options.useOverlay)
			this.QLoverlay = new Element("div", { 'id': "baobaz_quicklookoverlay", 'style':"display:none" }); 
		
		this.QLWindow = new Element('div',{ 'id': 'baobaz_quicklookwindow','style': 'display:none;' })		
		this.QLWindow.update(
			this.QLframe = new Element("div", {'id': "baobaz_quicklookframe"}).update(
				this.QLheader = new Element("div", {'id': "baobaz_quicklookheader"}).update(
					this.QLclose = new Element("a", {'id': "baobaz_quicklookclose", title: this.options.closeString, href: "#"}).update("<span>" + this.options.closeValue + "</span>")
				)
			) 
		);
		
		/*this.QLindicator = new Element("a", {'href': "#", 'id':'baobaz_quicklooindicator'}).addClassName('baobaz_quicklooindicator').update(this.options.quicklookButtonString);*/
		
		
		this.QLcontent = new Element("div", {id: "baobaz_quicklookcontent"}).update(
			this.QLloading = new Element("div", {id: "baobaz_quicklookloading"}).update(this.options.loadingString)
		);
		this.QLframe.insert({'bottom':this.QLcontent}); 
		
		var injectToEl = $(document.body); 
		document.body.insert({top:this.QLWindow});
		document.body.insert({top:this.QLoverlay});
		//document.body.insert({top:this.QLindicator});
		
		this.hideObserver   = this._hideQL.bindAsEventListener(this);
		this.appearObserver = this._showQL.bindAsEventListener(this);
		this.overObserver   = this._overQL.bindAsEventListener(this);
		this.outObserver    = this._outQL.bindAsEventListener(this);
		this._initObservers(); 
		
	},
	
	_overQL: function(e) {
		var it = Event.findElement(e,'.quicklook');
		//console.log(it);

    //.currentTarget;
		/*if($$('.baobaz_quicklooindicator').length == 0 ){*/
			it.addClassName('quicklook_indicatorvisible');
			this.QLindicator = new Element("a", {'href': "#"}).addClassName('baobaz_quicklooindicator').update(this.options.quicklookButtonString);
			it.insert({top: this.QLindicator});
			//this.QLindicator.show();
			$$('.baobaz_quicklooindicator').invoke('observe','click', this.appearObserver);
			//$(this.QLindicator).observe("click", this.appearObserver);
			//this.QLindicator.writeAttribute('onclick', "alert('jkjklj')");
		/*}*/
	},
	
	_outQL: function(e) {
		//alert('jkjkl');
		var ql = Event.findElement(e,'.quicklook');
		//var t = Event.findElement(e,'');
		ql.removeClassName('quicklook_indicatorvisible');
			//console.log(it.down('.baobaz_quicklooindicator'));
			//it.down('.baobaz_quicklooindicator').remove();
		//this.QLindicator.remove();
		//ql.down('.baobaz_quicklooindicator').remove();
		$$('.baobaz_quicklooindicator').invoke('remove');
		//var t = e.element(e);
		//var t =  Event.element(e); //event.currentTarget;
		//  if(!t.hasClassName('quicklook')) {
		//      it = t.up('.quicklook');
		//  } 
		//  else {
		  
		//  }
		//      it = t;
	    //if(!t.descendantOf(it)) {
		//	it.removeClassName('quicklook_indicatorvisible');
			//console.log(it.down('.baobaz_quicklooindicator'));
		//	it.down('.baobaz_quicklooindicator').remove();
			//$$('.baobaz_quicklooindicator').invoke('stopObserving','click', this.appearObserver);
			//$(this.QLindicator).stopObserving("click", this.appearObserver);
       // }
        
	},

	_showQL: function(e) {

		var it =  Event.element(e).up('.quicklook'); //event.currentTarget;
		this.currentQLitem = it;
		Event.stop(e);
		this.reInitContent();
		this.positionQL();
		this.showQL();
		$(document.body).addClassName('quicklook_loading');
		var ajax = new Ajax.Updater({ success:this.QLcontent}, '/eu/'+this.currentQLitem.readAttribute('storeid')+'/quicklook', 
		{ evalScripts:true, method: 'get', parameters: { 'id': this.currentQLitem.readAttribute('productid')},
		  onSuccess : function(){
            $(document.body).removeClassName('quicklook_loading');
          },
          // zadig quicklook quantity
          onComplete: function(){initCartProduct();}
		});
	},
	
	showQL: function() {
		
		if(this.options.transitions) {
			if(this.options.useOverlay) {
				$(this.QLoverlay).setStyle({opacity: 0, display: 'block'});
					Effect.Fade(this.QLoverlay, {
					from: 0,
					to: this.options.overlayOpacity,
					duration: this.options.overlayDuration,
					afterFinish: function() {
						Effect.Appear(this.QLWindow, {
							duration: this.options.fadeInDuration,
							transition: Effect.Transitions.sinoidal,
							afterFinish: function(){ }.bind(this)
						});
					}.bind(this)
				});
			} else {
				Effect.Appear(this.QLWindow, {
						duration: this.options.fadeInDuration,
						transition: Effect.Transitions.sinoidal,
						afterFinish: function(){ }.bind(this)
					});	
			}	
		} else {
			$(this.QLWindow).show();
			if(this.options.useOverlay) 
				$(this.QLoverlay).setStyle({opacity: this.options.overlayOpacity, display: 'block'}); 
		}
	}, 
	
	hideQL: function() {
		if(this.options.transitions){
			Effect.Fade(this.QLWindow, {
				duration: this.options.fadeOutDuration,
				afterFinish: function() {
					if(this.options.useOverlay)
					Effect.Fade(this.QLoverlay, {
						duration: this.options.overlayDuration,
						transition: Effect.Transitions.sinoidal,
						afterFinish: function(){this.reInitContent();}.bind(this)
					});
				}.bind(this)
			});
		}else {
			this.reInitContent();
			$(this.QLWindow).hide();
			if(this.options.useOverlay) 
				$(this.QLoverlay).setStyle({opacity: 0, display: 'none'}); 
		}
	}, 
	
	_hideQL: function(e) {
		var it = Event.element(e);
		Event.stop(e); // Stop event propaganation for link elements
		if(it.id == 'baobaz_quicklookoverlay' && !this.options.overlayClose) return false;
		this.hideQL();
	}, 
	
	_initObservers: function(){
		
		$$(this.options.quicklookElement).each(function(it,index) {
			//elementOpenQL
			//if(this.options.elementOpenQL)
			//Event.observe(it, "click", this.appearObserver);
			Event.observe(it, "mouseenter", this.overObserver);	
			Event.observe(it, "mouseleave", this.outObserver);
		},this);
		$(this.QLclose).observe("click", this.hideObserver);
		//$(this.QLindicator).observe("click", this.appearObserver);
		
		if(this.options.overlayClose && this.options.useOverlay)
			$(this.QLoverlay).observe("click", this.hideObserver);
		if(this.options.quicklookClose)
			$(this.QLWindow).observe("click", this.hideObserver);
	},
	
	reInitContent: function() {
		this.QLcontent.update(this.QLloading);
	},
	
	positionQL: function() {
		switch(this.options.QLposition) {
			case 'center':
				this.QLWindow.center();
			break;
			case 'relativeCenter':
				this.QLWindow.relativeCenter(this.currentQLitem);
			break;
			case 'relativeOffset':
				this.QLWindow.relativeOffset(this.currentQLitem, this.options.QLpostionOffsetX, this.options.QLpostionOffsetY);
			break;
		}
	}
}
Object.extend(BaobazQuicklook, BaobazQuicklook.Methods); 

Event.observe(document, "dom:loaded", function(e){ /*BaobazQuicklook.init()*/ });

// fonction pour centrer un element
ElementExtensions = {
	
		relativeCenter: function(element,element2) {
			element = $(element);
			element2 = $(element2);
			
			var elementOff = element2.cumulativeOffset();
			var elementDims = element2.getDimensions();
			
			var posX = elementOff.left + (elementDims.width/2)  - (element.getWidth() / 2) ;
			var posY = elementOff.top + (elementDims.height/2) - (element.getHeight() / 2) ;

			element.setStyle( { position: 'absolute', top: Math.floor(posY) + 'px', left: Math.floor(posX) + 'px' } );
			
			return element;	
		},
		
		relativeOffset: function(element,element2,offsetX,offsetY) {
			element = $(element);
			element2 = $(element2);
			
			var elementDims = element2.cumulativeOffset();
			var posX = elementDims.left + offsetX;
			var posY = elementDims.top + offsetY;

			element.setStyle( { position: 'absolute', top: Math.floor(posY) + 'px', left: Math.floor(posX) + 'px' } );
			
			return element;	
		},
		
		center: function (element,limitX,limitY)
		{
			element = $(element);
			
			var elementDims = element.getDimensions();
			var viewPort = document.viewport.getDimensions();
			var offsets = document.viewport.getScrollOffsets();
			var centerX = viewPort.width / 2 + offsets.left - elementDims.width / 2;
			var centerY = viewPort.height / 2 + offsets.top - elementDims.height / 2;
			if ( limitX && centerX < limitX )
			{
				centerX = parseInt(limitX);
			}
			if ( limitY && centerY < limitY )
			{
				centerY = parseInt(limitY);
			}
			
			element.setStyle( { position: 'absolute', top: Math.floor(centerY) + 'px', left: Math.floor(centerX) + 'px' } );
			
			return element;			
		}
	}
Element.addMethods(ElementExtensions);

//for debugging with console.log on IE, etc
//if (typeof console == "undefined" || typeof console.log == "undefined") var console = { log: function() {} };