var zoomer = {
	
	bindEvents: function()
	{
		var imgs_containers = $$('.zoom_img_container');
		
		// 0 : no zoom, 1 : zoom, 2 : loading
		imgs_containers.state = 0;
		
		imgs_containers.addEvent('mouseenter', function(e) {
			var e = new Event(e);
			
			if (!this.state) {
				//-- image zoom -
				this.image = this.getElements('img')[0];
				this.zoomable_height = this.image.getSize().size.y;
				this.zoomable_width = this.image.getSize().size.x;
					
				this.setStyle('cursor', 'wait');
				
				this.state = 2;
							
				//-- zone zoom +
				this.zoom_zone = $$('.zoom_zone')[0];
				
				var loadingImages = new Asset.images([this.getParent().getElements('var.big_img_url')[0].getText()], {
					onComplete: (function() {
						if (this.state == 2) {
							this.zoom_zone.empty();
								
							this.zoomed_img = loadingImages[0];
							this.zoomed_img.inject(this.zoom_zone);
							
							this.zoomed_height = this.zoomed_img.getSize().size.y;
							this.zoomed_width = this.zoomed_img.getSize().size.x;
				
							//-- zone loupe
							this.zoomer = $$('.zoomer')[0].clone().injectInside(this);
							this.zoomer.setOpacity(0.4);
							
							//-- "Voir plus" au clic
							this.zoomer.addEvent('click', (function() {
								var as = this.getParent().getElements('a');
								if (as.length)
									show_desc(as[0]);
							}).bind(this));
							
							this.zoomer_width = (this.zoom_zone.getSize().size.x / this.zoomed_width) * this.image.getSize().size.x;
							this.zoomer_height = (this.zoom_zone.getSize().size.y / this.zoomed_height) * this.image.getSize().size.y;
							
							this.zoomer.setStyle('width', this.zoomer_width - 2);
							this.zoomer.setStyle('height', this.zoomer_height - 2);
				
							this.zoomer_mouse_offset_x = this.zoomer_width / 2;
							this.zoomer_mouse_offset_y = this.zoomer_height / 2;
			
							this.setStyle('cursor', 'default');
							this.state = 1;
							this.fireEvent('mousemove', e);
						}
						else
							this.state = 0;
					}).bind(this)
				});
				
			}
		});

		imgs_containers.addEvent('mouseleave', function() {
			window.zoomer.switch_off(this);
		});
				
		imgs_containers.addEvent('mousemove', function(e) {
			if (this.state == 1) {
				var e = new Event(e);
				mouseX = e.page.x;
				mouseY = e.page.y;
				
				relMouseX = mouseX - this.image.getLeft();
				relMouseY = mouseY - this.image.getTop();
				
				if (relMouseX < -2 || relMouseX > this.image.getSize().size.x + 2
					 || relMouseY < -2 || relMouseY > this.image.getSize().size.y + 2)
				{
					zoomer.switch_off(this);
				}
				
				// MEP loupe
				var zoomer_top = relMouseY - this.zoomer_mouse_offset_y;
				var zoomer_left = relMouseX - this.zoomer_mouse_offset_x;

				
				if (zoomer_top < 0)
					zoomer_top = 0;
				else if (zoomer_top > this.zoomable_height - this.zoomer_height)
					zoomer_top = this.zoomable_height - this.zoomer_height;
				if (zoomer_left < 0)
					zoomer_left = 0;
				else if (zoomer_left > this.zoomable_width - this.zoomer_width)
					zoomer_left = this.zoomable_width - this.zoomer_width;
				
				
				this.zoomer.setStyle('top', zoomer_top);
				this.zoomer.setStyle('left', zoomer_left);
	
				//-- calcul des x et y proportionnels à l'image
				var zoom_x_prop = zoomer_left/ this.image.getSize().size.x;
				var zoom_y_prop = zoomer_top / this.image.getSize().size.y;
				
				this.zoomed_img.setStyle('top', -this.zoomed_height * zoom_y_prop);
				this.zoomed_img.setStyle('left', -this.zoomed_width * zoom_x_prop);
			}
		});
		
		//-- "Zoom +" toujours visible même en scrolldown
		
		var zoom_zone_elm = $$('.zoom_zone')[0];
		var illus_col_elm = $$('.illus_prod')[0];
		var zoom_initial_pos = zoom_zone_elm.getPosition().y
		
		window.addEvent('scroll', function() {
			var min_margin = 40;
			
			var y_scroll = $(window).getSize().scroll.y;
			var zoom_y_on_screen = zoom_initial_pos - y_scroll;
			
			
			//-- repositionnage
			if(zoom_y_on_screen < min_margin)
				illus_col_elm.setStyle('top', y_scroll + min_margin - zoom_initial_pos);
			else {
				illus_col_elm.setStyle('top', '');
			}
		});

	},
	
	switch_off: function(img_container) {
		if (img_container.zoomer) {
			img_container.zoomer.remove();
			img_container.zoomer = null;
		}
		if (img_container.zoomed_img && img_container.zoomed_img.setStyle) {
			img_container.zoomed_img.setStyle('top', 0);
			img_container.zoomed_img.setStyle('left', 0);
		}
		img_container.state = 0;
	}
}


function show_desc(el_a)
{
	var h5_txt = $(el_a).getParent().getElements('h5')[0].getText();
	var p_txt = $(el_a).getParent().getElements('p.tailles')[0].getText();
	var text = $(el_a).getParent().getElements('p.description')[0].getText();
	$$('.illus_prod h5')[0].setText(h5_txt);
	$$('.illus_prod p.tailles')[0].setText(p_txt);
	$$('.illus_prod p.desc_prod_actif')[0].setText(text);
}