﻿//{ ZoomImage
function ZoomImage($elm,$elmZoom,$obj){
	/*
		$elm:String || NodeElm
		$elmZoom:String || NodeElm || Object:
			{
				id:String,
				width:Number || String,
				height:Number || String,
				left:Number || String,
				top:Number || String,
				background:String,
			}
		$obj:Object:
			{
				link:Node A,
				onStart:Function,
				onStop:Function,
				onMouseOver:Function,
				onMouseOut:Function
			}
	*/
	
	if(!$elm || !$elmZoom)
		return alert('ZoomImage Error: You must define all arguments!');

	this.start = function($imgZoom){
		/*
			{
				img:String,
				imgZoom:String
			}
		*/
		if(!$imgZoom)return alert('ZoomImage.init Error: You must define all arguments');
		_imgZoom.src = $imgZoom;

		_this.removeImgEvent();
		_loadImage(_elmZoom,_imgZoom);
		_loadedImgs[_loadedImgs.length] = _imgZoom.src;
		if(typeof($obj.onStart) == 'function')
			$obj.onStart();
	};
	this.stop = function(){
		_this.removeImgEvent();
		_imgZoom.node.src = '';
		_elm.node.className = _elm.node.className.replace(/zoomCursor/g,'');
		if(_elm.linkNode)
			_elm.linkNode.className = _elm.linkNode.className.replace(/zoomCursor/g,'');
		hDiv(_imgZoom.node);
		if(typeof($obj.onStop) == 'function')
			$obj.onStop();
	};

	//{ VARIABLES
	var _this = this;
	var _imgs = {};
	var _imgCarret = 0;
	var _loaderIsShown = false;
	var _imageIsLoaded = false;
	var _showLoader = null;
	var _hideLoader = null;
	var _loaderImgObj = null;
	var _loadedImgs = [];
	var _viewerBorderColor = $obj.viewerBorderColor || '#000';
	var _viewerBgColor = $obj.viewerBgColor ? $obj.viewerBgColor : _viewerBorderColor;
	var _viewerBg = typeof($obj.viewerBg) == 'boolean' ? $obj.viewerBg : true;
	var _viewerBgOpacity = $obj.viewerBgOpacity || '50';
	var _mouseEvent = {};
	
	this.link = $obj.link;
	
	// image to zoom container
	var _elm = {};
		_elm.node = NodeUtil.getNode($elm);
		_elm.link = this.link || null;
		_elm.linkNode = gTag('a',_elm.node)[0];
		_elm.loaderId = _elm.node.id+'_loader' || _elm.node.nodeName.toLowerCase()+'_loaderElm';
		_elm.x = getPos(_elm.node)[0]; // todo: get functions
		_elm.y = getPos(_elm.node)[1]; // todo: get functions
		_elm.width = _elm.node.offsetWidth; // todo: get functions
		_elm.height = _elm.node.offsetHeight; // todo: get functions
		_elm.zoomViewer = {
			x:0,
			y:0,
			minX:0,
			minY:0,
			maxX:0,
			maxY:0,
			bgLeft: {},
			bgRight: {},
			bgBottom: {},
			bgTop: {}
		};
	
	// image to zoom
	var _img = {};
		if(!gTag('img',_elm.node)[0])
			createElm(_elm.node,['img',{src:'',alt:'',title:'',style:'display:none;'}]);
		_img.node = gTag('img',_elm.node)[0];
		
		_img.src = _img.node.src || null;
		_img.x = getPos(_img.node)[0];
		_img.y = getPos(_img.node)[1];
		_img.width = _img.node.width || _elm.width;
		_img.height = _img.node.height || _elm.height;
		_img.perc = {x:0,y:0};
		_img.propPerc = 0;
		_img.proportion = {width:0,height:0};
	
	// zoom container
	var _elmZoom = {};
		_elmZoom.iniTop = typeof($elmZoom.top) == 'number' ? $elmZoom.top : 0;
		if(NodeUtil.getNode($elmZoom)){
			_elmZoom.node = NodeUtil.getNode($elmZoom);
		}else if(typeof($elmZoom) == 'object'){
			if(NodeUtil.getNode($elmZoom.ref)){
				_elmZoom.initTop = $elmZoom.top;
				$elmZoom.top = typeof($elmZoom.top) == 'number' ? getPos($elmZoom.ref)[1]+$elmZoom.top : getPos($elmZoom.ref)[1];
				_elmZoom.initLeft = $elmZoom.left;
				$elmZoom.left = typeof($elmZoom.left) == 'number' ? getPos($elmZoom.ref)[0]+$elmZoom.left : getPos($elmZoom.ref)[0];
				$elmZoom.width = typeof($elmZoom.width) == 'number' ? elmZoom.width : $elmZoom.ref.offsetWidth;
				$elmZoom.height = typeof($elmZoom.height) == 'number' ? $elmZoom.height : $elmZoom.ref.offsetHeight;
				_elmZoom.ref = $elmZoom.ref;
			}
			createElm(null,[
				'div',{id:($elmZoom.id || 'contPhotoZoom'),style:'position:absolute;visibility:hidden;width:'+$elmZoom.width+'px;height:'+$elmZoom.height+'px;left:'+$elmZoom.left+'px;top:'+$elmZoom.top+'px;overflow:hidden;background:'+$elmZoom.background+';'+($elmZoom.other ? $elmZoom.other : '')},''
			]);
			_elmZoom.node = $($elmZoom.id || 'contPhotoZoom');
		}
		_elmZoom.loaderId = _elmZoom.node.id+'_loader' || _elmZoom.node.nodeName.toLowerCase()+'_loaderZoom';
		_elmZoom.x = getPos(_elmZoom.node)[0]; // todo: get functions
		_elmZoom.y = getPos(_elmZoom.node)[1]; // todo: get functions
		_elmZoom.width = _elmZoom.node.offsetWidth;
		_elmZoom.minHeight = $elmZoom.height || 0;
		_elmZoom.height = _elmZoom.node.offsetHeight;
		_elmZoom.initdocumentSize = {
			width:winW(),
			height:winH()
		};
	
	// image inside zoom container
	var _imgZoom = {};
		if(!gTag('img',_elmZoom.node)[0])
			createElm(_elmZoom.node,['img',{src:'',alt:'',title:'',style:'display:none;'}]);
		_imgZoom.node = gTag('img',_elmZoom.node)[0];
		
		_imgZoom.src = _imgZoom.node.src || '';
		_imgZoom.node.style.position = 'relative';
		_imgZoom.node.style.margin =
		_imgZoom.node.style.top = 
		_imgZoom.node.style.left = 0;
		
		_imgZoom.width = _imgZoom.node.width || _elmZoom.width;
		_imgZoom.height = _imgZoom.node.height || _elmZoom.height;
		_imgZoom.bound = {
			x:_imgZoom.width - _elmZoom.width,
			y:_imgZoom.height - _elmZoom.height
		};
		_imgZoom.x = 0;
		_imgZoom.y = 0;
	//}
	
	//{ get element
	this.getElm = function($elm){
		switch($elm){
			case 'elmToZoom':
				return _elm;
			case 'imgToZoom':
				return _img;
			case 'elmZoom':
				return _elmZoom;
			case 'imgZoom':
				return _imgZoom;
		}
	};
	//}

	//{ events
	this.addImgEvent = function(){
		EventUtil.add(_elm.node,'mouseover',_overImage);
		EventUtil.add(_elm.node,'mouseout',_mouseoutImageFnc);
	};
	this.removeImgEvent = function(){
		EventUtil.remove(document,'mousemove',_moveImage);
		EventUtil.remove(_elm.node,'mouseover',_overImage);
		EventUtil.remove(_elm.node,'mouseout',_mouseoutImageFnc);
	};
	//}
	
	//{ zoom navigation stuff
	var isInsideImage = true;
	var canGoOutImage = true;
	var execOut = true;
	function _moveImage($evt){
		if($evt){
			_mouseEvent.x = $evt.clientX + (gTag('html')[0].scrollLeft > gTag('body')[0].scrollLeft ? gTag('html')[0].scrollLeft : gTag('body')[0].scrollLeft);
			_mouseEvent.y = $evt.clientY + (gTag('html')[0].scrollTop > gTag('body')[0].scrollTop ? gTag('html')[0].scrollTop : gTag('body')[0].scrollTop);
		}
		$evt = {
			clientX:_mouseEvent.x,
			clientY:_mouseEvent.y
		};

		if(_isInsideArea($evt.clientX,_img.x,(_img.x+_img.width)) && _isInsideArea($evt.clientY,_img.y,(_img.y+_img.height))){
			
			isInsideImage = true;
			canGoOutImage = true;

			_img.propPerc = Math.round((_img.width*100)/_imgZoom.width);
			_img.proportion = {
				width:(_elmZoom.width*_img.propPerc)/100,
				height:(_elmZoom.height*_img.propPerc)/100
			};
			
			_img.perc.x = Math.round(($evt.clientX - _img.x - (_img.proportion.width/2)) * 100 / (_img.width - _img.proportion.width));
			_img.perc.y = Math.round(($evt.clientY - _img.y - (_img.proportion.height/2)) * 100 / (_img.height - _img.proportion.height));
			
			_imgZoom.x = Math.round(_img.perc.x * _imgZoom.bound.x / 100);
			_imgZoom.y = Math.round(_img.perc.y * _imgZoom.bound.y / 100);

			_imgZoom.node.style.marginLeft = -(_getOverPosition(_imgZoom.x,0,_imgZoom.bound.x)) + 'px';
			_imgZoom.node.style.marginTop = -(_getOverPosition(_imgZoom.y,0,_imgZoom.bound.y)) + 'px';
			
			if($('zoomViewer')){
				_elm.zoomViewer.x = ($evt.clientX - ($('zoomViewer').offsetWidth / 2));
				_elm.zoomViewer.y = ($evt.clientY - ($('zoomViewer').offsetHeight / 2));
				_elm.zoomViewer.minX = _img.x;
				_elm.zoomViewer.maxX = ((_img.x + _img.width) - $('zoomViewer').offsetWidth);
				_elm.zoomViewer.minY = _img.y;
				_elm.zoomViewer.maxY = ((_img.y + _img.height) - $('zoomViewer').offsetHeight);
				
				$('zoomViewer').style.left = _getOverPosition(_elm.zoomViewer.x,_elm.zoomViewer.minX,_elm.zoomViewer.maxX)+'px';
				$('zoomViewer').style.top = _getOverPosition(_elm.zoomViewer.y,_elm.zoomViewer.minY,_elm.zoomViewer.maxY)+'px';
				_refreshViewer();
			}
		}else{
			isInsideImage = false;
			if(canGoOutImage){
				setTimeout(function(){
					if(!isInsideImage){
						_outImage($evt);
						canGoOutImage = true;
						setTimeout(function(){
							_elmZoom.node.style.visibility = 'hidden';
							hDiv(_elmZoom.node);
							EventUtil.remove(document,'mousemove',_moveImage);
							EventUtil.add(_elm.node,'mouseover',_overImage);
						},100);
					}
				},50);
				canGoOutImage = false;
			}
		}
	}
	
	function _overImage($e){
		EventUtil.remove(_elm.node,'mouseover',_overImage);
		EventUtil.add(_elm.node,'mouseout',_mouseoutImageFnc);
		_refreshImageAttributes();
		isInsideImage = true;
		if(_imgZoom.node.src != document.location.href){
			setTimeout(function(){
				if(isInsideImage){
					_createViewer();
					if(typeof($obj.onMouseOver) == 'function')
						$obj.onMouseOver(_elm,_img,_elmZoom,_imgZoom);
					sDiv(_elmZoom.node);
					_elmZoom.node.style.visibility = 'visible';
					EventUtil.remove(_elm.node,'mouseout',_mouseoutImageFnc);
					EventUtil.add(document,'mousemove',_moveImage);
				}
			},600);
		}
	}
	function _outImage(){
		_refreshImageAttributes();
		setTimeout(function(){
			_delViewer();
			if(typeof($obj.onMouseOut) == 'function')
				$obj.onMouseOut(_elm,_img,_elmZoom,_imgZoom);
			_elmZoom.node.style.visibility = 'hidden';
			hDiv(_elmZoom.node);
		},50);
	}
	function _mouseoutImageFnc(){
		isInsideImage = false;
		if(typeof($obj.onMouseOut) == 'function')
			$obj.onMouseOut(_elm,_img,_elmZoom,_imgZoom);
		EventUtil.remove(_elm.node,'mouseout',_mouseoutImageFnc);
		EventUtil.add(_elm.node,'mouseover',_overImage);
	}
	
	this.onFunction = _overImage;
	this.outFunction = _outImage;
	
	function _createViewer(){
		
		_img.propPerc = Math.round((_img.width*100)/_imgZoom.width);

		if(!$('zoomViewer'))
			createElm(null,[
				'div',{id:'zoomViewer',style:'position:absolute;z-index:9;top:'+_img.y+'px;left:'+_img.x+'px;width:'+((_elmZoom.width*_img.propPerc)/100)+'px;height:'+((_elmZoom.height*_img.propPerc)/100)+'px;overflow:hidden;visibility:hidden;'},''
			]);
		if(!$('zoomViewerLeft'))
			createElm(null,[
				'div',{id:'zoomViewerLeft',style:'position:absolute;z-index:9;top:0;left:0;width:1px;height:'+$('zoomViewer').offsetHeight+'px;background:'+_viewerBorderColor+';overflow:hidden;visibility:hidden;'},''
			]);
		if(!$('zoomViewerRight'))
			createElm(null,[
				'div',{id:'zoomViewerRight',style:'position:absolute;z-index:9;top:0;left:0;width:1px;height:'+$('zoomViewer').offsetHeight+'px;background:'+_viewerBorderColor+';overflow:hidden;visibility:hidden;'},''
			]);
		if(!$('zoomViewerTop'))
			createElm(null,[
				'div',{id:'zoomViewerTop',style:'position:absolute;z-index:9;top:0;left:0;width:'+$('zoomViewer').offsetWidth+'px;height:1px;background:'+_viewerBorderColor+';overflow:hidden;visibility:hidden;'},''
			]);
		if(!$('zoomViewerBottom'))
			createElm(null,[
				'div',{id:'zoomViewerBottom',style:'position:absolute;z-index:9;top:0;left:0;width:'+$('zoomViewer').offsetWidth+'px;height:1px;background:'+_viewerBorderColor+';overflow:hidden;visibility:hidden;'},''
			]);
		if(_viewerBg){
			if(!$('zoomViewerLeftBg'))
				createElm(null,[
					'div',{id:'zoomViewerLeftBg',style:'position:absolute;z-index:9;top:-1000px;left:'+_img.x+'px;width:1px;height:'+$('zoomViewer').offsetHeight+'px;background:'+_viewerBgColor+';overflow:hidden;opacity:'+(_viewerBgOpacity/100)+';filter:Alpha(Opacity='+_viewerBgOpacity+');visibility:hidden;'},''
				]);
			if(!$('zoomViewerRightBg'))
				createElm(null,[
					'div',{id:'zoomViewerRightBg',style:'position:absolute;z-index:9;top:-1000px;left:-1000px;width:1px;height:'+$('zoomViewer').offsetHeight+'px;background:'+_viewerBgColor+';overflow:hidden;opacity:'+(_viewerBgOpacity/100)+';filter:Alpha(Opacity='+_viewerBgOpacity+');visibility:hidden;'},''
				]);
			if(!$('zoomViewerTopBg'))
				createElm(null,[
					'div',{id:'zoomViewerTopBg',style:'position:absolute;z-index:9;top:-1000px;left:'+_img.x+'px;width:'+_img.width+'px;height:1px;background:'+_viewerBgColor+';overflow:hidden;opacity:'+(_viewerBgOpacity/100)+';filter:Alpha(Opacity='+_viewerBgOpacity+');visibility:hidden;'},''
				]);
			if(!$('zoomViewerBottomBg'))
				createElm(null,[
					'div',{id:'zoomViewerBottomBg',style:'position:absolute;z-index:9;top:-1000px;left:'+_img.x+'px;width:'+_img.width+'px;height:'+$('zoomViewer').offsetHeight+'px;background:'+_viewerBgColor+';overflow:hidden;opacity:'+(_viewerBgOpacity/100)+';filter:Alpha(Opacity='+_viewerBgOpacity+');visibility:hidden;'},''
				]);
		}
	}
	function _refreshViewer(){
		
		$('zoomViewerLeft').style.top = 
		$('zoomViewerTop').style.top =
		$('zoomViewerRight').style.top = getPos($('zoomViewer'))[1]+'px';
		
		$('zoomViewerLeft').style.left = 
		$('zoomViewerBottom').style.left = 
		$('zoomViewerTop').style.left = getPos($('zoomViewer'))[0]+'px';
		
		$('zoomViewerRight').style.left = (getPos($('zoomViewer'))[0]+$('zoomViewer').offsetWidth-1)+'px';
		
		$('zoomViewerBottom').style.top = (getPos($('zoomViewer'))[1]+$('zoomViewer').offsetHeight-1)+'px';
		
		$('zoomViewerLeft').style.visibility =
		$('zoomViewerTop').style.visibility =
		$('zoomViewerRight').style.visibility =
		$('zoomViewerBottom').style.visibility = 'visible';
		
		if(_viewerBg){

			_elm.zoomViewer.bgTop.height = getPos($('zoomViewer'))[1] - _img.y;
			_elm.zoomViewer.bgTop.height = _elm.zoomViewer.bgTop.height > 0 ? _elm.zoomViewer.bgTop.height : 0;
			
			_elm.zoomViewer.bgBottom.height = (_img.y + _img.height) - (getPos($('zoomViewer'))[1] + $('zoomViewer').offsetHeight);
			_elm.zoomViewer.bgBottom.height = _elm.zoomViewer.bgBottom.height > _img.height ? 0 : _elm.zoomViewer.bgBottom.height;
			
			_elm.zoomViewer.bgLeft.width = getPos($('zoomViewer'))[0] - _img.x;
			_elm.zoomViewer.bgLeft.width = _elm.zoomViewer.bgLeft.width > 0 ? _elm.zoomViewer.bgLeft.width : 0;
			
			_elm.zoomViewer.bgRight.width = (_img.x + _img.width) - (getPos($('zoomViewer'))[0] + $('zoomViewer').offsetWidth - 1);
			_elm.zoomViewer.bgRight.width = _elm.zoomViewer.bgRight.width > 0 ? _elm.zoomViewer.bgRight.width : 0;

			$('zoomViewerLeftBg').style.width = _elm.zoomViewer.bgLeft.width+'px';
			$('zoomViewerRightBg').style.width = _elm.zoomViewer.bgRight.width+'px';
			$('zoomViewerTopBg').style.height = _elm.zoomViewer.bgTop.height+'px';
			$('zoomViewerBottomBg').style.height = _elm.zoomViewer.bgBottom.height+'px';

			$('zoomViewerLeftBg').style.visibility =
			$('zoomViewerRightBg').style.visibility =
			$('zoomViewerTopBg').style.visibility =
			$('zoomViewerBottomBg').style.visibility = 'visible';
			
			$('zoomViewerTopBg').style.top = _img.y+'px';
			$('zoomViewerRightBg').style.top = $('zoomViewerLeftBg').style.top = $('zoomViewerLeft').style.top;
			$('zoomViewerRightBg').style.left = $('zoomViewerRight').style.left;
			$('zoomViewerBottomBg').style.top = (getPos($('zoomViewer'))[1]+$('zoomViewer').offsetHeight)+'px';
		}
	}
	function _delViewer(){
		if($('zoomViewer'))
			delElm($('zoomViewer'));
		if($('zoomViewerLeft'))
			delElm($('zoomViewerLeft'));
		if($('zoomViewerRight'))
			delElm($('zoomViewerRight'));
		if($('zoomViewerTop'))
			delElm($('zoomViewerTop'));
		if($('zoomViewerBottom'))
			delElm($('zoomViewerBottom'));
		if(_viewerBg){
			if($('zoomViewerLeftBg'))
				delElm($('zoomViewerLeftBg'));
			if($('zoomViewerRightBg'))
				delElm($('zoomViewerRightBg'));
			if($('zoomViewerTopBg'))
				delElm($('zoomViewerTopBg'));
			if($('zoomViewerBottomBg'))
				delElm($('zoomViewerBottomBg'));
		}
	}
	
	function _getOverPosition($pos, $min, $max){
		if($pos <= $max && $pos >= $min){
			return $pos;
		}else{
			if($pos <= $min) return $min;
			if($pos >= $max) return $max;
		}
	}
	function _isInsideArea($pos, $min, $max){
		if($pos <= $max && $pos >= $min)
			return true;
		return false;
	}
	//}
	
	//{ load image stuff
	this.customLoader = function($obj){
		/*
			{
				loadImg:String
				showLoader:Function($imgObj),
				hideLoader:Function($imgObj)
			}
		*/
		if(!$obj)$obj = {};
		if(typeof($obj.showLoader) == 'function'){
			_showLoader = $obj.showLoader;
		}else{
			_showLoader = _defShowLoader;
		}
		if(typeof($obj.hideLoader) == 'function'){
			_hideLoader = $obj.hideLoader;
		}else{
			_hideLoader = _defhideLoader;
		}
		if(typeof($obj.loaderImgObj) == 'object'){
			_loaderImgObj = $obj.loaderImgObj;
		}
	};
	function _loadImage($zoomElmObj,$zoomImgObj){
		var applyZoomImgObj = function(){
			sDiv($zoomImgObj.node);
			$zoomImgObj.node.src = $zoomImgObj.src;
			_refreshImageAttributes();
			_this.addImgEvent();
			_overImage();
			_elm.node.className += ' zoomCursor';
			if(_elm.linkNode)
				_elm.linkNode.className += ' zoomCursor';
		};
		var overLoading = function(){
			if(!_imageIsLoaded){
				_showLoader($zoomElmObj,$zoomImgObj);
			}else{
				_hideLoader($zoomElmObj,$zoomImgObj);
			}
		};
		var outLoading = function(){
			if(_loaderIsShown){
				_hideLoader($zoomElmObj,$zoomImgObj);
			}
		};

		EventUtil.add(_elm.node, 'mouseover', overLoading);
		EventUtil.add(_elm.node, 'mouseout', outLoading);
		_imgs[$zoomElmObj.loaderId] = new LoadImage($zoomImgObj.src,{
			onStart: function($imgObj){
				if(typeof($obj.onMouseOver) == 'function')
					$obj.onMouseOver(_elm,_img,_elmZoom,_imgZoom);
				_showLoader($zoomElmObj,$zoomImgObj,$imgObj);
				_loaderIsShown = true;
				_imageIsLoaded = false;
			},
			onComplete:function($imgObj){
				$zoomImgObj.node.width = $imgObj.width;
				$zoomImgObj.node.height = $imgObj.height;
				applyZoomImgObj();
				_hideLoader($zoomElmObj,$zoomImgObj,$imgObj);
				_loaderIsShown = false;
				_imageIsLoaded = true;
				EventUtil.remove(_elm.node, 'mouseover', overLoading);
				EventUtil.remove(_elm.node, 'mouseout', outLoading);
			},
			onError:function(){
				// fb.info('error to load image: '+$zoomImgObj.src);
			}
		})
	}
	function _defShowLoader($zoomElmObj,$zoomImgObj,$loadImgObj){
		if(!$($zoomElmObj.loaderId))
			createElm(null,[
				'div',{id:$zoomElmObj.loaderId,style:'position:absolute;z-index:15;width:'+$zoomElmObj.width+'px;height:'+$zoomElmObj.height+'px;left:'+$zoomElmObj.x+'px;top:'+$zoomElmObj.y+'px;background:#FFF;text-align:center;opacity:.75;Filter:Alpha(Opacity=75);'},(_loaderImgObj ? [
					'img',{src:_loaderImgObj.src,style:'margin-top:'+(($zoomElmObj.height-_loaderImgObj.height)/2)+'px'}
				] : [
					'p',{style:'margin-top:'+(($zoomElmObj.height/2)-5)+'px'},
						'carregando'
				])
			]);
		return true;
	}
	function _defhideLoader($zoomElmObj,$zoomImgObj,$loadImgObj){
		if($($zoomElmObj.loaderId))
			delElm($($zoomElmObj.loaderId));
		return true;
	}
	function _refreshImageAttributes(){
		
		sDiv(_elmZoom.node);
		
		_img.src = _img.node.src;
		_img.x = getPos(_img.node)[0];
		_img.y = getPos(_img.node)[1];
		_img.width = _img.node.offsetWidth;
		_img.height = _img.node.offsetHeight;
		
		_imgZoom.width = _imgZoom.node.width;
		_imgZoom.height = _imgZoom.node.height;
		_imgZoom.bound = {
			x:_imgZoom.width - _elmZoom.width,
			y:_imgZoom.height - _elmZoom.height
		};
		_imgZoom.x = 0;
		_imgZoom.y = 0;

		_img.propPerc = Math.round((_img.width*100)/_imgZoom.width);
		_img.proportion = {
			width:(_elmZoom.width*_img.propPerc)/100,
			height:(_elmZoom.height*_img.propPerc)/100
		};
		
		_elm.width = _elm.node.offsetWidth; 
		_elm.height = _elm.node.offsetHeight; 
	
		_elmZoom.x = getPos(_elmZoom.node)[0]; 
		_elmZoom.y = getPos(_elmZoom.node)[1]; 
		_elmZoom.width = _elmZoom.node.offsetWidth;
		_elmZoom.height = _elmZoom.node.offsetHeight;
		
		var newHeight = getPos($('btComprar').parentNode)[1] - getPos($('btComprar').parentNode.parentNode)[1] - _elmZoom.iniTop;
		
		_elmZoom.node.style.height = ((newHeight < _elmZoom.minHeight) ? newHeight : _elmZoom.minHeight)+'px';
		
		if(NodeUtil.getNode($elmZoom.ref)){
			_elmZoom.node.style.left = (typeof(_elmZoom.initLeft) == 'number' ? getPos($elmZoom.ref)[0]+_elmZoom.initLeft : getPos($elmZoom.ref)[0]) + 'px';
		}
		
		hDiv(_elmZoom.node);
	}
	//}
	
	// init
	this.customLoader();
	if(typeof($obj.onInit) == 'function')$obj.onInit(_elm.node,_elmZoom.node);
};
//}
//{ load and open photos to zoom
var PhotoToZoom = function($zoomObj,$obj){

	var _this = this;
	$obj = $obj || {};
	this._contNode = $zoomObj.getElm('elmToZoom').node;
	this._linkNode = $zoomObj.getElm('elmToZoom').link;
	this._zoomObj = $zoomObj;
	this._onLoad = (typeof($obj.onLoad) == 'function') ? $obj.onLoad : null;

	this._loadedPhotos = {};
	this._imgZoomToLoad = null;
	this._openImageFunction = null;
	
	this._applyLoadZoomHandlers = function(){
		//EventUil.remove(_this._contNode,'mouseover',_this.loadZoom);
		_this._contNode.onmouseover = function(){
			_this.loadZoom();
			_this._contNode.onmouseover = null;
		};
	};
	this.getZoomObj = function(){
		return this._zoomObj;
	};
	this.unload = function(){
		_this._contNode.onmouseover =
		_this._linkNode.onclick = null;
		hDiv(_this._linkNode);
		gTag('img',_this._contNode)[0].onclick = null;
	};
	this.load = function($scope,$contId, $apply){
		$obj = $obj || {};
		$apply = ($apply === false) ? false : true;
		
		if(this._onLoad)this._onLoad();
		
		_this._contNode = _this._contNode || NodeUtil.getNode($contId);

		//reset zoomObj Element
		// original and new img path
		var url = typeof($scope) == 'string' ? $scope : gTag('img',$scope)[0].src;
		var urlToLoad = ImageSizes.change(url,'big');
		_this._imgZoomToLoad = ImageSizes.change(url,'zoom');
		var name = '_'+urlToLoad.split("/")[urlToLoad.split("/").length-1];

			//don't load if the image is already opened
		if($apply){
			if(gTag('img',_this._contNode)[0].src == urlToLoad){
				_this._applyLoadZoomHandlers();
				return false;
			}//else{
				//_this._zoomObj.stop();
			//}
			
			
			//open LollyPop
			_this.popIsOpen = false;
			_this._openImageFunction = function(){
				_this.popIsOpen = true;
				openBox('boxImgClose', {
					onClose:function(){
						_this.popIsOpen = false;
					},
					onOpen:zoomProduct1.outFunction,
					doScroll:true,
					fix:true,
					vAlign:180,
					img:{
						src:ImageSizes.change(url,'pop'),
						loader:'boxImgCustomLoader'
					},
					config:{
						zIndex:20,
						bgColor:'ffffff'
					}
				});
			};
			if(!$('boxImgClose'))
				createElm(null,[
					'div',{id:'boxImgClose', style:"padding:10px;border:1px solid #E6E7E8;background:#fff;display:none;"},[
						'a',{href:'javascript:;', onclick:function(){closeBox('boxImgClose');}, 'class':'btFecharLolly'},
							'Fechar'
					]
				]);
			if(!$('boxImgCustomLoader'))
				createElm(null,[
					'div',{id:'boxImgCustomLoader', style:'width:300px;height:150px;display:none;border:1px solid #E6E7E8;background:url('+icoLoader.getImage().src+') no-repeat center center #fff;'},''
				]);
			
			sDiv(_this._linkNode);
			_this._linkNode.onclick = _this._openImageFunction;
			//gTag('img',_this._contNode)[0].onclick = _this._openImageFunction;
			
			_this._linkNode.href = 'javascript:;';
			_this._linkNode.target = '';
		}
		
		//load image
		var imgNode = gTag('img',_this._contNode)[0];
		_this._loadedPhotos[name] = new LoadImage(urlToLoad,{
			onStart:function($obj){
				if($apply){
					// imgNode.style.visibility = 'hidden';
					if(!$('photoLoader')){
						setTimeout(function(){
							if(!_this._loadedPhotos[name].isLoaded()){
								_this._contNode.style.overflow = 'hidden';
								createElm(null,[
									'div',{id:'photoLoader',style:'position:absolute;z-index:16;width:'+(_this._contNode.offsetWidth)+'px;height:'+(_this._contNode.offsetHeight)+'px;left:'+getPos(_this._contNode)[0]+'px;top:'+getPos(_this._contNode)[1]+'px;background:url('+icoLoader.getImage().src+') center center no-repeat;text-align:center;'},''
								]);
							}
						},250);
					}
				}
			},
			onComplete:function($obj){
				if($apply){
					if($('photoLoader')){
						$('photoLoader').style.height = $obj.height+'px';
					}
					imgNode.src = $obj.src;
					imgNode.width = $obj.width;
					imgNode.height = $obj.height;
					_this._applyLoadZoomHandlers();
					setTimeout(function(){
						if($('photoLoader')){
							delElm($('photoLoader'));
						}
						// imgNode.style.visibility = 'visible';
						_this._contNode.style.overflow = '';
					},250);
				}
			}
		});
		return false;
	};
	this.loadZoom = function(evt){
		gTag('img',_this._contNode)[0].title = '';
		_this._zoomObj.start(_this._imgZoomToLoad);
		return false;
	};
};
//}
//{ easy way to change the url size of the imagens
var ImageSizes = {
	_sizesObj:{},
	init:function($obj){
		var _this = this;
		_this._sizesObj = $obj;
	},
	get:function($url,$size){
		var _this = this;
		$size = $size ? (($size.toLowerCase() == 'code') ? $size : 'size') : 'size';
		for(var i in _this._sizesObj){
			if($url.indexOf(_this._sizesObj[i]) >= 0){
				if($size == 'size'){
					return i;
				}else{
					return _this._sizesObj[i];
				}
			}
		}
		return false;
	},
	change:function($url,$size){
		$size = $size.toLowerCase();
		var _this = this;
		var size = this.get($url);
		var sizeCode = this.get($url,'code');
		
		if(!_this._sizesObj[$size])
			return false;
		
		if($size != size){
			return $url.split(sizeCode)[0]+_this._sizesObj[$size]+$url.split(sizeCode)[1];
		}else{
			return $url;
		}
	}
};
//}
