/*******************************************************
* Zoomable Images Tool for meddle's weblog, version 0.9
* (c)2004 Sergi Meseguer (meddle AT dzygn DOT com)
********************************************************/


// COMMON STUFF:
var Imatges = {
	prepareZoomableLinks : function(){ 
		var ZoomElms = Extras.getElementsByClass('zoomable');
		for(var i = 0; i < ZoomElms.length; i++){
			var href = ZoomElms[i].id; 
			var w = ZoomElms[i].width; 
			var h = ZoomElms[i].height;
			var ALT =  ZoomElms[i].alt; 
			var W = ALT.split("x")[0]; 
			var H = ALT.split("x")[1]; 
			var zooming = parseInt((W/w)*100);
			// Delete "Detailed image" link
			var ul = document.getElementById(href+"ul"); 
			ul.removeChild(ul.lastChild);
			// Add Zoom link:
			ul.innerHTML += "<li class=\"zoom\"><a href=\"#\" onclick=\"Imatges.prepareZoomableImage('"+href+"','"+w+"','"+h+"','"+W+"','"+H+"');return false\">zoom "+zooming+"%</a></li>";
		}
	},
	
	prepareZoomableImage : function(id,w,h,W,H){
		// Cloning image to thumbnail:
		if (document.getElementById(id+"Thumbnail")==null) {
			var elm = document.getElementById(id+"ul").parentNode;
			var Div = document.createElement("div");
			Div.className = "thumb";
			Div.id = id+"Thumbnail";
				var IMG = document.createElement("img");
				IMG.src = "/v3/imgs/"+id+".jpg";
				IMG.id = id+"thumb";
				IMG.width = parseInt(w/2);
				IMG.height = parseInt(h/2);
				Div.appendChild(IMG);
				
				Div.innerHTML += "<div id=\""+id+"Screen\" class=\"screen\" style=\"width: "+(w/2)*(w/W)+"px; height: "+(h/2)*(h/H)+"px;\"></div>";
			elm.appendChild( Div );	
			
			// Delete original image, add a text message and initialize the Zoom object:
			var original = document.getElementById(id).parentNode;
			var entry = original.parentNode;
			entry.removeChild(original);
			
			//AFEGIM CAPA AL PRINCIPI - start
			var CAPA = document.createElement("div");
			CAPA.className = "Box";
			CAPA.id = id+"Box";
		
			if(elm.nextSibling) {
				entry.insertBefore(CAPA, elm.nextSibling);
			}
			else {
				entry.appendChild(CAPA);
			}	
			var CAPA = document.getElementById(id+"Box")
			CAPA.style.width = w + "px";
			CAPA.style.height = h + "px";
			CAPA.innerHTML = "<div id=\""+id+"Boxed\" class=\"Boxed\"><img src=\"/v3/imgs/"+id+"_zoom.jpg\" id=\""+id+"Big\" onload=\"Imatges.imgLoaded('"+id+"')\" /></div><div id=\""+id+"Load\" class=\"Load\" style=\"width:"+w+"px; height:"+h+"px;\">Loading...</div>"
			//AFEGIM CAPA AL PRINCIPI - end
			
			
			// Delete p, make div+nested div (clip) + big img + Events.
			//entry.innerHTML += "<div id=\""+id+"Box\" class=\"Box\" style=\"width:"+w+"px; height:"+h+"px;\"><div id=\""+id+"Boxed\" class=\"Boxed\"><img src=\""+id+".jpg\" id=\""+id+"Big\" onload=\"Imatges.imgLoaded('"+id+"')\" /></div><div id=\""+id+"Load\" class=\"Load\" style=\"width:"+w+"px; height:"+h+"px;\">Loading...</div></div>"
		}
	},

	imgLoaded : function(img){
		document.getElementById(img+"Load").style.display = "none";
		document.getElementById(img+"Screen").style.display = "block";
	
		img = new Zoom(img);
	}
		
}

// ZOOM CLASS:
function Zoom(imatge){
	var me = this ;
	this.thumbWidth = document.getElementById(imatge+"thumb").width; 
	this.thumbHeight = document.getElementById(imatge+"thumb").height; 
	this.screenWidth = parseInt(document.getElementById(imatge+"Screen").style.width); 
	this.screenHeight = parseInt(document.getElementById(imatge+"Screen").style.height) ; 
	this.ratioThumbBig = this.thumbWidth / document.getElementById(imatge+"Big").width; 

	var drag = this.drag = function(e){
		me.userX = (e.layerX) ? e.layerX : event.x;
		me.userY = (e.layerY) ? e.layerY : event.y;
			
		if (me.userX <= me.thumbWidth - (me.screenWidth/2) 
				&& me.userY <= me.thumbHeight - (me.screenHeight/2)
				&& me.userX >=  (me.screenWidth/2)
				&& me.userY >= (me.screenHeight/2)) 
		{
			// Centering screen around cursor:
			me.userX = me.userX - (me.screenWidth/2);
			me.userY = me.userY - (me.screenHeight/2);
			
			var granX = me.userX / me.ratioThumbBig; 
			var granY = me.userY / me.ratioThumbBig; 
	
			// Move big:
			document.getElementById(imatge+"Boxed").style.left = parseInt(-1 * granX) + "px";
			document.getElementById(imatge+"Boxed").style.top = parseInt(-1 * granY) + "px";
			// Move screen:
			document.getElementById(imatge+"Screen").style.left = parseInt(me.userX) + "px";
			document.getElementById(imatge+"Screen").style.top = parseInt(me.userY) + "px";
				
		}
		Extras.addEvent(document.getElementById(imatge+"Thumbnail"), "mouseup", drop, false);
	}
	var drop = this.drop = function(e){
		Extras.removeEvent(document.getElementById(imatge+"Thumbnail"), "mousemove", drag, false);
	}
	
	var start = this.start = function(e){
		if (!e) e = window.event;
		Extras.addEvent(document.getElementById(imatge+"Thumbnail"), "mousemove", drag, false);
	}
	
	Extras.addEvent(document.getElementById(imatge+"Thumbnail"), "mousedown", start, false);
}

if (document.getElementById && document.getElementsByTagName && document.createElement && !window.opera) {
	if(Cookie.get("meddle_v3_zoom")!="n") Extras.addEvent(window, "load", Imatges.prepareZoomableLinks, false);
}