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

var quick_text = "Quick Look";
var close_text = "Close window";
var loading_text = "Loading...";

if (STORE_ID == 1){
   quick_text = "Aperçu";
   close_text = "Fermer";
loading_text = "Chargement...";  
}

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 (customize with the following offset)
		QLpostionOffsetX:-9,
		QLpostionOffsetY:-16,		
		width: 500, 						// width in px of Quicklook window
		height: 300, 						// height in px of Quicklook window
		overlayOpacity: .65, 				// overlay opacity
		overlayDuration: .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: quick_text,	//
		loadingString: loading_text, 		// loading string message
		closeString: close_text, 		// title attribute for close window link
		closeValue: "×" 				// string for close link 
	},
	
	_options: new Object,
	setOptions: function(options) {
		Object.extend(this.options, options || {});
	},

	init: function() {
		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.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});
		
		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(event) {
		var item = Event.findElement(event, this.options.quicklookElement); //event.currentTarget;
		if(!this.QLindicator || !this.QLindicator.descendantOf(item) ){
			this.QLindicator = new Element("a", {'href': "#"}).addClassName('baobaz_quicklookindicator').update(this.options.quicklookButtonString);
			item.insert({top: this.QLindicator});
			$(this.QLindicator).observe("click", this.appearObserver);
			
			this.QLindicator.show();
			item.addClassName('quicklook_indicatorvisible');				
		}
	},
	
	_outQL: function(event) {
		var t = event.relatedTarget;
		if(!t) t = event.toElement;
		var item =  Event.findElement(event, this.options.quicklookElement); //event.currentTarget;
		if($(!t || !t.descendantOf(item))) {
			item.removeClassName('quicklook_indicatorvisible');
			this.QLindicator.stopObserving('click').remove();
		}
	},

	_showQL: function(event) {
		var item = Event.findElement(event, this.options.quicklookElement); //event.currentTarget; 
		this.currentQLitem = item;		
		
		if(Event.element(event).hasClassName('baobaz_quicklookindicator')) {		
    		event.stop();
    		this.reInitContent();
    		this.positionQL();
    		this.showQL();
    		$(document.body).addClassName('quicklook_loading');
			var us = (window.location.toString().search('/us/') != -1) ? "/us":"";
    		var ajax = new Ajax.Updater({success:this.QLcontent}, us+'/quicklook', 
    		{ parameters: { 'id': this.currentQLitem.readAttribute('productid')},
				evalScripts: true,
    		  onSuccess : function(){$(document.body).removeClassName('quicklook_loading');}
    		});		
		}	
	},
	
	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(){}.bind(this)
					});
				}.bind(this)
			});
		}else {
			$(this.QLWindow).hide();
			if(this.options.useOverlay) 
				$(this.QLoverlay).setStyle({opacity: 0, display: 'none'}); 
		}
	}, 
	
	_hideQL: function(event) {
		var item = Event.element(event);
		event.stop(); // Stop event propaganation for link elements
		if(item.id == 'baobaz_quicklookoverlay' && !this.options.overlayClose) return false;
		this.hideQL();
	}, 
	
	_initObservers: function(){
		
		$$(this.options.quicklookElement).each(function(item,index) {
			Event.observe(item, "mouseover", this.overObserver);	
			Event.observe(item, "mouseout", this.outObserver);
		},this);
		
		
		$(this.QLclose).observe("click", this.hideObserver);
		
		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;
		}
	},

	parseScript: function(_source) {
		var source = _source;
		var scripts = new Array();
		
		// Strip out tags
		while(source.indexOf("<script") > -1 || source.indexOf("</script") > -1) {
			var s = source.indexOf("<script");
			var s_e = source.indexOf(">", s);
			var e = source.indexOf("</script", s);
			var e_e = source.indexOf(">", e);
			
			// Add to scripts array
			scripts.push(source.substring(s_e+1, e));
			// Strip from source
			source = source.substring(0, s) + source.substring(e_e+1);
		}
		
		// Loop through every script collected and eval it
		for(var i=0; i<scripts.length; i++) {
			try {
				eval(scripts[i]);
			}
			catch(ex) {
				// do what you want here when a script fails
			}
		}
		
		// Return the cleaned source
		return source;
	}

}
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() {} };