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][1];
		}		
}

// Dato un gruppo carica le immagini del gruppo
KMZoom.prototype.LoadTmpHolder = function(gruppo, indexDefault)	{
	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][3]) {
				this.GruppoImg[y]	=	this.ArrMainImage[i];
				this.RenderElementoHandler(this, y);
				y++;
			}
		}
		
		// Impostazione della prima immagine del gruppo
		if (this.GruppoImg.length > 0) {
			if (indexDefault < this.GruppoImg.length)
				this.ReplaceImageFromIndex(indexDefault);
			else {
				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 + "_imgMainImage").style.display = "block";
	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][1];
		}
	
		if (this.GruppoImg[this.Index][2] == 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][2] != null) {
			
			this.zoomAttivo = true;
			
			// Visualizzazione della gif di attesa
			var dimImageZoom = document.getElementById(this.Id + '_dvMainImageZoom');
			dimImageZoom.innerHTML = document.getElementById(this.Id + '_loadImg').innerHTML;
			dimImageZoom.childNodes.item(0).style.display = 'inline';
			
			// Preload dell'immagine
			this.oZoomImage = new Image();
			this.oZoomImage.IdKMZoom = this.Id;
			this.oZoomImage.onload = onKM_LoadImg;
			this.oZoomImage.src = this.GruppoImg[this.Index][2];
										
			// Nascondo l'immagine di anteprima
			document.getElementById(this.Id + "_imgMainImage").style.display = "none";
			// Mostro il div che visualizza l'immagine di zoom
			document.getElementById(this.Id + "_dvMainImageZoom").style.display = "block";

			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 + '" />';
	enableDrag(this.IdKMZoom + '_dvMainImageZoom', this.IdKMZoom + '_imgMainImageZoom', this.width, this.height);					
}

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

function getCanvasWidth() { 
   return document.body.offsetWidth || innerWidth; 
} 

function getCanvasHeight() { 
   return document.body.offsetHeight || innerHeight; 
} 

function makeContainer(item){
	dragContainer = item;
	dragContainer.style.position = 'relative';
	dragContainer.style.overflow = 'hidden';
}

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;
	
	if (obj.offsetParent) {

		left += obj.offsetLeft ;
		top += obj.offsetTop;		
		
		while (obj = obj.offsetParent) {
			if (parseInt(obj.style.left)) {
				left -= parseInt(obj.style.left);
				top -= parseInt(obj.style.top);
			}
		}
	}
	return {x:left, y:top};
}

function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}

function mouseMove(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);
	var targWidth, targHeight, targPos;
	var browseWidth, browseHeight;

	browseWidth		=	getCanvasWidth();
	browseHeight	=	getCanvasHeight();

	if(dragObject){	
		if (dragContainer) {
			targWidth  = parseInt(dragContainer.offsetWidth);
			targHeight = parseInt(dragContainer.offsetHeight);
			if (((mousePos.y - mouseOffset.y) < 0) && ((mousePos.y - mouseOffset.y + dragObject.height) > (targHeight)))	{dragObject.style.top	= (mousePos.y - mouseOffset.y) + 'px';}
			if (((mousePos.x - mouseOffset.x) < 0) && ((mousePos.x - mouseOffset.x + dragObject.width) > (targWidth)))	{dragObject.style.left	= (mousePos.x - mouseOffset.x) + 'px';}
		} else {
			dragObject = null;
		}
		return false;
	}
}

function mouseUp(){
		dragObject = null;
}

function makeDraggable(item){
	if(!item) return;
	try {item.style.cursor = 'pointer';} catch (e) {} //cursor property breaks IE5.5
	item.onmousedown = function(ev){		
		dragObject  = this;
		dragObject.style.position = 'absolute';
		mouseOffset = getMouseOffset(this, ev);
		return false;
	}
}

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

	var dragItem = null;
	var dragCont = null;
	var contW, contH = 0;
	var top, left;
	
	document.onmousemove = mouseMove;
	document.onmouseup   = mouseUp;
	
	dragCont = document.getElementById(spContainer);
	makeContainer(dragCont);

	dragItem = document.getElementById(imgDrag);
	makeDraggable(dragItem);
	dragItem.style.position = 'absolute';
	
	dragItem.style.height = imgHeight + 'px'; dragItem.style.width = imgWidth + 'px';
	
	dragItem.style.top = 0; dragItem.style.left = 0;
	dragItem.top = 0; dragItem.left = 0;

	try {
		top = -((parseInt(dragItem.style.height)/2) - (parseInt(dragCont.style.height)/2));
		left = -((parseInt(dragItem.style.width)/2) - (parseInt(dragCont.style.width)/2));
	} catch(e) {
		top = 0;
		left = 0;
	}
	dragItem.style.top = top +'px';
	dragItem.style.left = left+'px';
	
	dragItem.top = dragItem.style.top;
	dragItem.left = dragItem.style.left;
	
	dragItem.alt = 'Click and hold to drag image';	
}
//Drag Image End