KMZoom = function(id, immagini, renderElementoHandler, resetElementiHandler) {
		this.Id = id;
		this.Index = 0;
		this.GruppoCorrente = null;
		this.GruppoImg = new Array();
		this.zoomAttivo = false;
		
		// Array contenente tutte le immagini
		this.ArrMainImage = immagini;
		
		// Gestore evento che disegna l'elemento di selezione dell'immagine
		this.RenderElementoHandler = renderElementoHandler;
		this.ResetElementiHandler = resetElementiHandler;
		this.OnZoomInHandler = null;
		this.OnZoomOutHandler = null;
		this.OnZoomDisableHandler = null;
		this.OnImagePopulating = null;
		this.OnImagePopulated = null;
		
		// Variabile di controllo
		this.oZoomImage = new Image();
		this.tZoomLoaded;
		
		// Preload delle immagini
		var i = 0
		for (i=0; i < this.ArrMainImage.length; i++) {
			var preload = new Image();
			preload.src = this.ArrMainImage[i][0];
		}		
}

// Dato un gruppo carica le immagini del gruppo
KMZoom.prototype.LoadTmpHolder = function(gruppo)	{
	if (this.GruppoCorrente != gruppo) {
		this.GruppoCorrente = gruppo;
				
		// Eliminazione delle vecchie posizioni
		this.ResetElementiHandler(this);
	
		this.HideZoomImage();
		
		// Impostazioni immagini del nuovo gruppo
		this.GruppoImg = new Array();
		var	i, y;
		y = 0;
		for (i=0; i < this.ArrMainImage.length; i++) {
			if	(this.GruppoCorrente	==	this.ArrMainImage[i][2]) {
				this.GruppoImg[y]	=	this.ArrMainImage[i];
				this.RenderElementoHandler(this, y);
				y++;
			}
		}
		
		// Impostazione della prima immagine del gruppo
		if (this.GruppoImg.length > 0) {
			this.ReplaceImageFromIndex(0);
		}
	}
}

// Sostituisce l'immagine che occorre zoomare
KMZoom.prototype.ReplaceImageFromIndex = function(index) {
	if (index < this.GruppoImg.length) {
		// Evento populating
		if (this.OnImagePopulating != null) {
				this.OnImagePopulating();
		}

		this.Index = index;

		this.HideZoomImage();
		this.PopulateImages();

		// Evento populated
		if (this.OnImagePopulated != null) {
				this.OnImagePopulated();
		}
	}
}

// Passa dall'immagine zoom all'immagine non zoom
KMZoom.prototype.HideZoomImage = function()	{
	this.zoomAttivo = false;

	document.getElementById(this.Id + "_dvMainImageZoom").style.display = "none";
	
	if (this.OnZoomInHandler != null) {
		this.OnZoomInHandler();
	}
	return false;
}

KMZoom.prototype.PopulateImages = function(){
	if (document.getElementById(this.Id + '_imgMainImage') != null)	{
		if	(this.GruppoImg[this.Index] != null)	{
			document.getElementById(this.Id + '_imgMainImage').src = this.GruppoImg[this.Index][0];
		}

		if (this.GruppoImg[this.Index][1] == null)	{
			// Zoom non abilitato
			if (this.OnZoomDisableHandler != null) {
				this.OnZoomDisableHandler();
			}
		} else {
			// Zoom abilitato
			if (this.OnZoomInHandler != null) {		
				this.OnZoomInHandler();
			}
		}
	}
}

// Metodo che passa dall'immagine normale all'immagine zoom
KMZoom.prototype.ShowZoomImage = function()	{
	if	(this.GruppoImg[this.Index] != null)	{
		if (this.GruppoImg[this.Index][1] != null) {

			this.zoomAttivo = true;

			// Visualizzazione della gif di attesa
			document.getElementById(this.Id + '_dvMainImageZoom').innerHTML = document.getElementById(this.Id + '_loadImg').innerHTML;
			document.getElementById(this.Id + '_loadImg').style.display = 'block';

			// Preload dell'immagine
			this.oZoomImage = new Image();
			this.oZoomImage.IdKMZoom = this.Id;
			this.oZoomImage.onload = onKM_LoadImg;
			this.oZoomImage.src = this.GruppoImg[this.Index][1];

			if (this.OnZoomOutHandler != null) {
				this.OnZoomOutHandler();
			}
		}
	}
	
	return false;
}
	
function onKM_LoadImg() {
	document.getElementById(this.IdKMZoom + '_dvMainImageZoom').innerHTML = '<img id="' + this.IdKMZoom + '_imgMainImageZoom" src="' + this.src + '" />';
	document.getElementById(this.IdKMZoom + '_loadImg').style.display = 'none';
	enableDrag(this.IdKMZoom + '_imgMainImage', this.IdKMZoom + '_dvMainImageZoom', this.IdKMZoom + '_imgMainImageZoom', this.width, this.height);					
}

//Drag Image Start
var dragObject  = null;
var dragContainer = null;
var mouseOverContainer = null;

function getMouseOffset(target, ev){
	ev = ev || window.event;

	var docPos    = getPosition(target);
	var mousePos  = mouseCoords(ev);

	return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(obj){
	var left = 0;
	var	top = 0;
	
	while (obj = obj.offsetParent) {
		if (parseInt(obj.offsetLeft)) {
			left += parseInt(obj.offsetLeft);
		}
		if (parseInt(obj.offsetTop)) {
			top += parseInt(obj.offsetTop);
		}
	}
	return {x:left, y:top};
}

function mouseCoords(ev) {
	var x1, y1
	if(ev.pageX || ev.pageY){
		x1 = ev.pageX;
		y1 = ev.pageY;

	} else {
		x1 = ev.clientX + document.body.scrollLeft - document.body.clientLeft;
		y1 = ev.clientY + document.body.scrollTop  - document.body.clientTop;
	};

	return {x: x1, y: y1};
}

function getNewDragPosition(obj) {
	var containerPosX = parseInt(dragContainer.clientWidth / mouseOverContainer.clientWidth * obj.x);
	var containerPosY = parseInt(dragContainer.clientHeight / mouseOverContainer.clientHeight * obj.y);

	var dragPosY = parseInt(containerPosY * (dragContainer.clientHeight - dragObject.height) / dragContainer.clientHeight);
	var dragPosX = parseInt(containerPosX * (dragContainer.clientWidth - dragObject.width ) / dragContainer.clientWidth);
	
	return {x: dragPosX, y: dragPosY};
}

function makeMouseOverContainer(item) {
	mouseOverContainer = item;
	
	if (!item) return;
	
	item.onmouseover = function(ev) {
			mouseOverContainer = this;

			// Apertura dello zoom
			dragContainer.style.display = "block";
			dragContainer.style.borderWidth='1px';
		
	}

	item.onmousemove = function(ev) {
		if (!mouseOverContainer) return;

		var mousePos  = getMouseOffset(mouseOverContainer, ev);
		var newDragPos = getNewDragPosition(mousePos);
		dragObject.style.top	= newDragPos.y + 'px';					
		dragObject.style.left	= newDragPos.x + 'px';	
	}
	

	item.onmouseout = function(ev) {
		mouseOverContainer = null;
		
		// Chiusura dello zoom
		dragContainer.style.display = "none";			
		dragContainer.style.borderWidth='0px';
	}	
}

function makeContainer(item){
	dragContainer = item;
	//dragContainer.style.position = 'relative';
	dragContainer.style.overflow = 'hidden';
	
	if(!item) return;
//	try {item.style.cursor = 'pointer';} catch (e) {} //cursor property breaks IE5.5
}

function makeDraggable(item){
	dragObject = item;
	dragObject.style.position = 'absolute';
}

function enableDrag(moContainer, spContainer, imgDrag, imgWidth, imgHeight) {

	var dragItem = null;
	var dragCont = null;
	var moveCont = null;
	var contW, contH = 0;
	var top, left;
	
	dragCont = document.getElementById(spContainer);
	makeContainer(dragCont);

	dragItem = document.getElementById(imgDrag);
	makeDraggable(dragItem);

	moveCont = document.getElementById(moContainer);
	makeMouseOverContainer(moveCont);
/*
	dragCont.style.display = "block";
	dragCont.style.borderWidth='1px';
	dragCont.style.borderColor='#ffcccc';
	dragCont.style.borderStyle='solid';	
	*/
	var newDragPos = getNewDragPosition({x: parseInt(moveCont.clientWidth / 2), y: parseInt(moveCont.clientHeight / 2)});
	dragObject.style.top	= newDragPos.y + 'px';					
	dragObject.style.left	= newDragPos.x + 'px';
}