// JavaScript Document

var hpmaisZoom = new Class({
	Implements:Options,
	ul:null,
	div:null,	
	lupa:null,
	zoomcontainer:null,
	drag:null,
	options:{
		'zoom_width':280,
		'zoom_height':330,
		'thumb_width':0,
		'thumb_height':0,
		'img_width':0,
		'img_height':0,
		'zoomContainer':$('zoomContainer')
	},
	initialize: function(ul_thumbs,div,options) {
		this.setOptions(options);
		this.ul=$(ul_thumbs);
		this.div=$(div);

		var min_height = this.options.img_height!='0' ? this.options.img_height+'px' : '32px';
		this.ul.setStyle('min-height',min_height);

		var min_width = this.options.img_width!='0' ? this.options.img_width+'px' : '32px';
		this.ul.setStyle('min-width',min_width);
		
		var imgs=this.ul.getElements('img[img_zoom]');
		if (imgs.length>1) {
			imgs.each(function(el,i){
				if (this.options.thumb_height!='0') el.set('height',this.options.thumb_height);
				if (this.options.thumb_width!='0') el.set('width',this.options.thumb_width);
				el.addEvent('click',function(e){
					this.showImage(el);
				}.bind(this)).setStyle('cursor','pointer');
				if (i==0) this.showImage(el);
			},this);
		} else {
			if (this.length==1) this.showImage(imgs[0]);
			this.ul.setStyle('display','none');
		}
		
	},
	
	showImage: function(img) {
		this.zoomDetach();
		this.div.setStyle('background','url('+PATH_IMG+'ajax-loader.gif) no-repeat center');
		var img_atual = this.div.getElements('img');
		if (img_atual.length>0) {
			img_atual=img_atual[0];
			var myFx = new Fx.Tween(img_atual);
			myFx.start('opacity',0);
		}
			
		var img_tmp = Asset.image(img.get('img_g'),{onLoad:function(){
			var img_atual = this.div.getElements('img');
			if (img_atual.length>0) {
				img_atual.dispose();
				this.zoomDetach();					
			}
			
			if (this.options.height!='0') img_tmp.set('height',this.options.height);
			if (this.options.width!='0') img_tmp.set('width',this.options.width);
			img_tmp.addEvents({
				'mouseover':function(e){
					this.zoomAttach(e,img_tmp,img.get('img_zoom'));
				}.bind(this),
				'mouseout':function(e){
					if (this.busy) this.zoomDetach(img_tmp);
				}.bind(this)
			});
			this.div.setStyle('background','none');
			img_tmp.inject(this.div);
		}.bind(this)});
		
	},
	busy: false,
	zoomAttach: function(e,el,src) {
		if (this.zoomcontainer==null) {
			var e = new Event(e);
			var el = el;
			this.busy=true;
			this.zoomcontainer = new Element('div',{'class':'zoomContainer'}).setStyles({'width':this.options.zoom_width,'height':this.options.zoom_height,'background-image':'url('+PATH_IMG+'ajax-loader.gif)','background-repeat':'no-repeat','background-position':'center','overflow':'hidden'}).inject(this.options.zoomContainer);
			var img_zoom = Asset.image(src,{onLoad:function(){
				// insere img
				if (this.zoomcontainer!=null) {
					this.zoomcontainer.setStyle('background-image','none');
					img_zoom.inject(this.zoomcontainer);
					this.busy=false;
					el.setStyle('opacity',0.4);
	
					// lupa
					var zoomCoords = img_zoom.getCoordinates();
					var gCoords = el.getCoordinates();
					var ratio_width = (this.options.zoom_width*100)/img_zoom.width;
					var ratio_height = (this.options.zoom_height*100)/img_zoom.height;
					
					var ratio_width_zoom = (img_zoom.width*100)/gCoords.width;
					var ratio_height_zoom = (img_zoom.height*100)/gCoords.height;
					
					var lupa_width = (gCoords.width/100) * ratio_width;
					var lupa_height = (gCoords.height/100) * ratio_height;
					
					var limits = {x:[gCoords.left,(gCoords.left+gCoords.width-lupa_width)],y:[gCoords.top,(gCoords.top+gCoords.height-lupa_height)]};
					
					var left = e.page.x-(lupa_width/2).toInt();
					if (left<limits.x[0]) left = limits.x[0]; else if (left>limits.x[1]) left = limits.x[1];
	
					var top = e.page.y-(lupa_height/2).toInt();
					if (top<limits.y[0]) top = limits.y[0]; else if (top>limits.y[1]) top = limits.y[1];
					
					this.lupa = new Element('div',{'class':'zoomLupa'}).setStyles({
						'background-image':'url('+el.get('src')+')',
						'background-repeat':'no-repeat',
						'position':'absolute',
						'width':lupa_width+'px',
						'height':lupa_height+'px',
						'left':left,
						'top':top
					}).inject(this.div);
					
					this.setPositions(el,img_zoom,ratio_width_zoom,ratio_height_zoom);
					
					this.lupa.addEvent('mouseout',function(){ this.zoomDetach(el); }.bind(this));
					this.drag = new Drag(this.lupa,{
						'modifiers':{x:'left',y:'top'},
						'grid':1,
						'snap':1,
						'limit':limits,
						'onDrag':function(drag){
							this.setPositions(el,img_zoom,ratio_width_zoom,ratio_height_zoom);
						}.bind(this)
					});
					this.drag.detach();
					this.drag.start(e);
				}
			}.bind(this)});	
		}
	},
	
	setPositions: function(el,img_zoom,ratio_width_zoom,ratio_height_zoom) {
		if (this.lupa!=null) {
			var position = this.lupa.getPosition(el);
			var zposx=(position.x/100)*ratio_width_zoom;
			var zposy=(position.y/100)*ratio_height_zoom;
			this.lupa.setStyle('background-position',(position.x*-1)+'px '+(position.y*-1)+'px');
			img_zoom.setStyles({'margin-left':(zposx*-1)+'px','margin-top':(zposy*-1)+'px'});
		}
	},
	
	zoomDetach: function(el) {
		if (this.zoomcontainer != null) this.zoomcontainer.dispose();
		if (this.lupa != null) this.lupa.dispose();
		if (typeof(el)!='undefined') el.setStyle('opacity',1);
		if (this.drag != null) { this.drag.detach(); this.drag.stop(); }
		this.zoomcontainer=null;
		this.lupa=null;
		this.drag=null;
	}

});