var Boutique = {};

Boutique.getNodeOffset = function(node) {
	var x = 0, y = 0;
	while (node.offsetParent) {
		x += node.offsetLeft;
		y += node.offsetTop;
		node = node.offsetParent;
	}
	return {x: x, y: y};
}

Boutique.initColorSelector = function() {
	var i = 0;
	var colorContainer = document.getElementById('colorContainer' + i);
	while (colorContainer) {		
		var colorSelectors = colorContainer.getElementsByTagName('A');
		for (var j = 0;j < colorSelectors.length;++j) {
			colorSelector = colorSelectors[j];
			colorSelector.onclick = function(e) {
				var colorContainer = this.parentNode.parentNode;
				colorContainer.getElementsByTagName('INPUT')[0].value = this.title;
				
				var colors = colorContainer.getElementsByTagName('A');
				for (var k = 0;k < colors.length;++k) {
					colors[k].className = '';
				}
				this.className = 'selected';
				this.blur();
				return false;
			}
		}
		var colorContainer = document.getElementById('colorContainer' + ++i);
	}
};

Boutique.initThumbSelector = function() {
	var preview = document.getElementById('preview');
	var zoomPreview = document.getElementById('zoomPreview');
	zoomPreview = zoomPreview.getElementsByTagName('IMG')[0];
	var thumbnailsContainer = document.getElementById('thumbnails');
	var thumbnails = thumbnailsContainer.getElementsByTagName('IMG');
	
	for (var j = 0;j < thumbnails.length;++j) {
		thumbnails[j].onclick = function() {
			var match = /_([0-2])[.]jpg$/.exec(this.src);
			preview.src = preview.src.replace(/_[0-2][.]jpg$/, '_' + match[1] + '.jpg');
			zoomPreview.src = zoomPreview.src.replace(/_[0-2][.]jpg$/, '_' + match[1] + '.jpg');
			return false;
		};
	}
};


Boutique.initPreviewZoom = function() {
	var zoomPreview = document.getElementById('zoomPreview');
	var magnifier = document.getElementById('magnifier');
	var imageToZoom = document.getElementById('preview');
	var zoomedImage = zoomPreview.getElementsByTagName('IMG')[0];
	
	var frame, scaleX, scaleY, maxX, maxY;		
	var setupMagnifier = function() {
		scaleX = zoomedImage.offsetWidth / imageToZoom.offsetWidth;
		scaleY = zoomedImage.offsetHeight / imageToZoom.offsetHeight;
		magnifier.style.width = (zoomPreview.offsetWidth / zoomedImage.offsetWidth) * imageToZoom.offsetWidth + 'px';
		magnifier.style.height = (zoomPreview.offsetHeight / zoomedImage.offsetHeight) * imageToZoom.offsetHeight + 'px';
		maxX = imageToZoom.offsetWidth - magnifier.offsetWidth;
		maxY = imageToZoom.offsetHeight - magnifier.offsetHeight;
		

		return true;
	};
	
	var magnify = function(e) {
		var e = e || window.event;		
		var x = (e.pageX || (e.clientX + document.documentElement.scrollLeft));
		var y = (e.pageY || (e.clientY + document.documentElement.scrollTop));
		frame = Boutique.getNodeOffset(magnifier.offsetParent);
		x -= frame.x + magnifier.offsetWidth / 2;
		y -= frame.y + magnifier.offsetHeight / 2
		x = (x < 0) ? 0 : (x > maxX) ? maxX : x; 
		y = (y < 0) ? 0 : (y > maxY) ? maxY : y;
		magnifier.style.left = x + 'px';
		magnifier.style.top = y + 'px';
		zoomedImage.style.left = (-magnifier.offsetLeft * scaleX) + 'px';
		zoomedImage.style.top = (-magnifier.offsetTop * scaleY) + 'px';
	};
	
	zoomedImage.onload = imageToZoom.onload = function() {
		var img = this;
		setTimeout(function() {

			if (imageToZoom.complete && zoomedImage.complete)
				setupMagnifier();
		}, 0);
	};
	
	imageToZoom.parentNode.onmousemove = magnify;
	imageToZoom.parentNode.onmouseover = function() {
		magnifier.style.visibility = 'visible';
		zoomPreview.style.visibility = 'visible';
		zoomPreview.style.zIndex = 100;
		Boutique.switchVisibilityTo(document.getElementById('ficheProduit'), 'SELECT', 'hidden');
	};	
	imageToZoom.parentNode.onmouseout = function() {
		magnifier.style.visibility = 'hidden';
		zoomPreview.style.visibility = 'hidden';
		zoomPreview.style.zIndex = -100;
		Boutique.switchVisibilityTo(document.getElementById('ficheProduit'), 'SELECT', 'visible');
	};
	
};

Boutique.switchVisibilityTo = function(container, tagName, value) {	
	var nodes = container.getElementsByTagName(tagName);
	for (var i = 0;i < nodes.length;++i)
		nodes[i].style.visibility = value;
};

Boutique.init = function() {
	Boutique.initPreviewZoom();
	Boutique.initColorSelector();
	Boutique.initThumbSelector();
};
Boutique.init();