// Direct Dependencies: Prototype, Fly.BrowserDetect, Fly.Dom

Fly.ImageZoomer = function(trigger, thumbsContainer, options)
{
	this.insertShim =
		Fly.BrowserDetect.browser == 'Explorer' &&
		Fly.BrowserDetect.version >= 5.5 &&
		Fly.BrowserDetect.version < 7;

	this.xPosition = 0;
	this.yPosition = 0;
	this.zoomLevel = 1;

	this.trigger = trigger;
	
	this.options = options || {};
	
	var css = Fly.ImageZoomer.css;

	Fly.Dom.create(
		['div',{'=':'zoomBox',style:css.zoomBox},
			['div',{'=':'viewPort',style:css.viewPort},
				['img',{'=':'bottomView',style:css.bottomView}],
				['div',{'=':'waitLayer',style:css.waitLayer},
					['img',{'=':'hourglass',style:css.hourglass,src:this.url('/women/img/hourglass.gif')}]
				],
				['img',{'=':'topView',style:css.topView}],
				['div',{'=':'dragSurface',style:css.dragSurface}],
				['div',{'=':'zoomThumb',style:css.zoomThumb},
					['div',{'=':'zoomThumbHighlight',style:css.zoomThumbHighlight}]
				],
				['div',{'=':'zoomInButton',style:css.zoomInButton},
					['img',{'=':'zoomInImage',style:css.buttonImage,alt:'Zoom In',src:this.url('/women/img/zoom-in.png')}]
				],
				['div',{'=':'zoomOutButton',style:css.zoomOutButton},
					['img',{'=':'zoomOutImage',style:css.buttonImage,alt:'Zoom Out',src:this.url('/women/img/zoom-out.png')}]
				],
				['div',{'=':'closeButton',style:css.closeButton},
					['img',{'=':'closeImage',style:css.buttonImage,alt:'Close',src:this.url('/women/img/zoom-close.png')}]
				]
			],
			['div',{'=':'label',style:css.label}]
		], this);


	Fly.Dom.create(['div',{'=':'triggerWrapper',style:css.triggerWrapper}],this);

	this.triggerWrapper.style.width = this.trigger.width;
	this.triggerWrapper.style.height = this.trigger.height;

	this.trigger.parentNode.replaceChild(this.triggerWrapper, this.trigger);

	this.triggerWrapper.appendChild(this.trigger);

	this.topView.onload = this.topViewLoaded.bind(this);

	this.triggerWrapper.onmouseover = this.showZoomButton.bindAsEventListener(this);
	this.triggerWrapper.onmouseout = this.hideZoomButton.bindAsEventListener(this);
	
	this.zoomInButton.onclick = this.zoomIn.bindAsEventListener(this);
	this.zoomOutButton.onclick = this.zoomOut.bindAsEventListener(this);
	this.closeButton.onclick = this.hide.bindAsEventListener(this);
	
	this.dragSurface.onmousedown = this.beginDrag.bindAsEventListener(this);

	if (!isNun(thumbsContainer))
	{	
		Fly.Dom.create(['div',{'=':'thumbsBox',style:css.thumbsBox}],this);

		this.zoomBox.appendChild(this.thumbsBox);
	
		thumbs = thumbsContainer.getElementsByTagName('img');
		
		this.thumbs = [];
	
		if (this.options.addTriggerImage)
		{
			this.addThumb(this.trigger);
		}
		
		for (var i = 0; i < thumbs.length; ++i)
		{
			this.addThumb(thumbs[i]);
		}
	}

	this.pngFix(this.zoomInImage);
	this.pngFix(this.zoomOutImage);
	this.pngFix(this.closeImage);

	if (this.insertShim)
	{
		Fly.Dom.create(['iframe',{'=':'zoomShim',style:css.zoomShim,src:'javascript:void(0);'}], this);

		$('body').appendChild(this.zoomShim);
	}

	this.zoomBox.style.zIndex = 1000;

	$('body').appendChild(this.zoomBox);

	this.trigger.onclick = this.show.bindAsEventListener(this);

	if (!this.options.hideZoomButton)
	{
		this.triggerWrapper.appendChild(
			Fly.Dom.create(
				['div',{'=':'zoomable',style:css.zoomable},
					['div',{'=':'zoomableShadow',style:css.zoomableShadow},'Click to Zoom'],
					['div',{'=':'zoomableText',style:css.zoomableText},'Click to Zoom']
				], this)
		);
		
		this.zoomable.style.top = (this.trigger.height-20)+'px';
		this.zoomable.onclick = this.show.bindAsEventListener(this);
	}
};

Fly.ImageZoomer.prototype.addThumb = function(img)
{
	var i = this.thumbs.length;
	
	Fly.Dom.create(['img',{'=':i,style:Fly.ImageZoomer.css.thumbImg}],this.thumbs);

	this.thumbs[i].alt = img.alt;
	
	if (this.options.thumbSize)
	{
		this.thumbs[i].src = this.resize(img.src, this.options.thumbSize);
	}
	else
	{
		this.thumbs[i].src = img.src;
	}

	this.thumbsBox.appendChild(this.thumbs[i]);

	if (this.thumbs[i].alt && this.thumbs[i].setToolTip)
	{
		this.thumbs[i].setToolTip(document.createTextNode(this.thumbs[i].alt));
	}

	this.setThumbListeners(i, $(this.thumbs[i]));
};

Fly.ImageZoomer.prototype.pngFix = function(img)
{
	if (Fly.BrowserDetect.browser == 'Explorer' &&
		Fly.BrowserDetect.version >= 5.5 &&
		Fly.BrowserDetect.version < 7)
	{
		var imgName = img.src.toUpperCase()

		if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
		{
			var imgID = (img.id) ? "id='" + img.id + "' " : ""
			var imgClass = (img.className) ? "class='" + img.className + "' " : ""
			var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
			var imgStyle = "display:inline-block;" + img.style.cssText
			if (img.align == "left") imgStyle = "float:left;" + imgStyle
			if (img.align == "right") imgStyle = "float:right;" + imgStyle
			if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
			var strNewHTML = "<span " + imgID + imgClass + imgTitle
				+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
				+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
				+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
			img.outerHTML = strNewHTML
		}
	}
};

Fly.ImageZoomer.prototype.setThumbListeners = function(index, thumb)
{
	thumb.onclick = function() { this.swap(index); }.bindAsEventListener(this);
};

Fly.ImageZoomer.prototype.show = function()
{
	if (Fly.ImageZoomer.activeZoomer && (Fly.ImageZoomer.activeZoomer != this))
	{
		Fly.ImageZoomer.activeZoomer.hide();
	}

	Fly.ImageZoomer.activeZoomer = this;

	this.zoomLevel = 1;
	
	this.viewSize = (screen.height>768?480:(screen.height>600?360:240));
	this.thumbSize = Math.round(this.viewSize/5);

	this.hourglass.style.left = (this.viewSize/2-16)+'px';
	this.hourglass.style.top = (this.viewSize/2-16)+'px';

	this.viewPort.style.width = this.viewSize+'px';
	this.viewPort.style.height = this.viewSize+'px';

	this.zoomThumb.style.width = this.thumbSize+'px';
	this.zoomThumb.style.height = this.thumbSize+'px';

	this.zoomBox.style.width = this.viewSize+'px';

	this.closeButton.style.left = (this.viewSize-44)+'px';

	var top = '50px'; // Math.min((screen.height-this.zoomBox.clientHeight-200)/2, 120)+'px';

	this.zoomBox.style.top = top;
	this.zoomThumb.style.top = (this.viewSize-this.thumbSize-1)+'px';

	this.showImage();

	if (this.insertShim)
	{	
		this.zoomShim.style.top = top;
		this.zoomShim.style.width = this.zoomBox.clientWidth+'px';
		this.zoomShim.style.height = this.zoomBox.clientHeight+'px';
		this.zoomShim.style.visibility = 'visible';
	}

	this.zoomBox.style.visibility = 'visible';
};

Fly.ImageZoomer.prototype.hide = function()
{
	this.zoomBox.style.visibility = 'hidden';

	if (this.insertShim)
	{	
		this.zoomShim.style.visibility = 'hidden';
	}

	Fly.ImageZoomer.activeZoomer = undefined;
};

Fly.ImageZoomer.prototype.swap = function(index)
{
	this.zoomLevel = 1;

	this.trigger.src = this.resize(this.thumbs[index].src, this.trigger.width, this.trigger.height);
	
	this.trigger.alt = this.thumbs[index].alt;
	this.trigger.title = this.thumbs[index].title;
		
	this.showImage();
};

Fly.ImageZoomer.prototype.resize = function(url, width, height)
{
	var parts = url.split('/');
	
	for (var i = 0; i < parts.length; ++i)
	{
		if (parts[i] == 'ipp')
		{
			if (parts.length > i+1)
			{
				if (height)
				{
					parts[i+2] = width + 'x' + height;
				}
				else
				{
					parts[i+2] = width;
				}
			}
		}
	}

	return parts.join('/');
};

Fly.ImageZoomer.prototype.zoomIn = function(e)
{
	if (this.zoomLevel < 8)
	{
		this.zoomLevel = this.zoomLevel*2;
		this.xPosition = this.xPosition*2-this.viewSize/2;
		this.yPosition = this.yPosition*2-this.viewSize/2;
		this.zoomThumbHighlight.style.width = this.thumbSize/this.zoomLevel+'px';
		this.zoomThumbHighlight.style.height = this.thumbSize/this.zoomLevel+'px';
		this.showImage();
	}

	return false;
};

Fly.ImageZoomer.prototype.zoomOut = function(e)
{
	if (this.zoomLevel > 1)
	{
		this.zoomLevel = this.zoomLevel/2;
		this.xPosition = this.xPosition/2+this.viewSize/4;
		this.yPosition = this.yPosition/2+this.viewSize/4;
		this.zoomThumbHighlight.style.width = this.thumbSize/this.zoomLevel+'px';
		this.zoomThumbHighlight.style.height = this.thumbSize/this.zoomLevel+'px';
		this.showImage();
	}
	
	return false;
}

Fly.ImageZoomer.prototype.showImage = function()
{
	this.dragSurface.style.cursor = 'wait';

	if (this.zoomLevel == 1)
	{
		this.xPosition = 0;
		this.yPosition = 0;
		this.zoomOutButton.style.visibility = 'hidden';
		this.zoomThumb.style.visibility = 'hidden';
	}
	else
	{
		this.zoomOutButton.style.visibility = 'inherit';
		this.zoomThumb.style.visibility = 'inherit';
	}

	if (this.zoomLevel == 4)
	{
		this.zoomInButton.style.visibility = 'hidden';
	}
	else
	{
		this.zoomInButton.style.visibility = 'inherit';
	}

	this.snapPosition();
	this.positionView(this.bottomView);	
	this.positionZoomHighlight();	

	this.topView.style.opacity = '0';
	this.topView.style.filter = 'alpha(opacity=0)';

	this.topView.src = this.resize(this.trigger.src, this.viewSize*this.zoomLevel);
	
	this.zoomThumb.style.backgroundImage = 
		'url(' + this.resize(this.trigger.src, this.thumbSize) + ')';
		
	this.label.innerHTML = this.trigger.alt;
};

Fly.ImageZoomer.prototype.topViewLoaded = function()
{
	this.bottomView.src = this.topView.src;

	if (this.zoomLevel == 1)
	{
		this.dragSurface.style.cursor = 'default';
	}
	else
	{
		this.dragSurface.style.cursor = 'move';
	}

	this.positionView(this.topView);	
	this.topView.style.opacity = '100';
	this.topView.style.filter = 'alpha(opacity=100)';
}

Fly.ImageZoomer.prototype.snapPosition = function()
{
	this.xPosition=Math.max(Math.min(0,this.xPosition),(1-this.zoomLevel)*this.viewSize);
	this.yPosition=Math.max(Math.min(0,this.yPosition),(1-this.zoomLevel)*this.viewSize);
}

Fly.ImageZoomer.prototype.positionView = function(view)
{
	view.style.width = (this.zoomLevel*this.viewSize)+'px';
	view.style.height = (this.zoomLevel*this.viewSize)+'px';
	view.style.left = Math.max(Math.min(0,this.xPosition),(1-this.zoomLevel)*this.viewSize)+'px';
	view.style.top = Math.max(Math.min(0,this.yPosition),(1-this.zoomLevel)*this.viewSize)+'px';
}

Fly.ImageZoomer.prototype.positionZoomHighlight = function()
{
	this.zoomThumbHighlight.style.left = (this.thumbSize-2)/this.viewSize*(-this.xPosition/this.zoomLevel)+'px';
	this.zoomThumbHighlight.style.top = (this.thumbSize-2)/this.viewSize*(-this.yPosition/this.zoomLevel)+'px';
}

Fly.ImageZoomer.prototype.positionImage = function()
{
	this.snapPosition();
	this.positionView(this.bottomView);	
	this.positionView(this.topView);	
	this.positionZoomHighlight();	
}
	
Fly.ImageZoomer.prototype.beginDrag = function(e)
{
	this.dragSurface.onmousemove = this.drag.bindAsEventListener(this);
	this.dragSurface.onmouseout = this.endDrag.bindAsEventListener(this);
	this.dragSurface.onmouseup = this.endDrag.bindAsEventListener(this);
	this.xDragStart = e.screenX;
	this.yDragStart = e.screenY;
}

Fly.ImageZoomer.prototype.drag = function(e)
{
	this.xPosition=this.xPosition+e.screenX-this.xDragStart;
	this.yPosition=this.yPosition+e.screenY-this.yDragStart;
	this.xDragStart = e.screenX;
	this.yDragStart = e.screenY;
	this.positionImage();
}

Fly.ImageZoomer.prototype.endDrag = function()
{
	this.dragSurface.onmousemove = null;
	this.dragSurface.onmouseout = null;
	this.dragSurface.onmouseup = null;
}

Fly.ImageZoomer.prototype.showZoomButton = function()
{
	if (this.zoomable)
	{
		this.zoomable.style.visibility = 'visible';
		this.zoomable.style.opacity = '1';
	}
}

Fly.ImageZoomer.prototype.hideZoomButton = function()
{
	if (this.zoomable)
	{
		this.zoomable.style.visibility = 'inherit';
		this.zoomable.style.opacity = '0.5';
	}
}

Fly.ImageZoomer.prototype.url = function(path)
{
	if ((path.indexOf('http') != 0) && (document.location.href.indexOf('file:') == 0))
	{
		return '.'+path;
	}
	else
	{
		return path;
	}
}

Fly.ImageZoomer.prototype.resource = function(path)
{
	return 'url('+Fly.ImageZoomer.prototype.url(path)+')';
}

Fly.ImageZoomer.css =
{
	zoomBox:
	{
		position: ((Fly.BrowserDetect.browser == 'Explorer' && Fly.BrowserDetect.version < 7) ? 'absolute' : 'fixed'),
		left: '25%', //'200px',
		backgroundColor: '#fff',
		border: '2px solid #071040',
		visibility: 'hidden',
		textAlign: 'center',
		padding: '8px',
		MozUserSelect: 'none'
	},
	zoomShim:
	{
		position: ((Fly.BrowserDetect.browser == 'Explorer' && Fly.BrowserDetect.version < 7) ? 'absolute' : 'fixed'),
		left: '200px',
		visibility: 'hidden',
		filter: 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'
	},
	zoomable:
	{
		position: 'absolute',
		left: '0px',
		width: '100%',
		opacity: '0.5'
	},
	zoomableShadow:
	{
		position: 'absolute',
		left: '1px',
		top: '1px',
		width: '100%',
		textAlign: 'center',
		fontWeight: 'bold',
		color: '#000'
	},
	zoomableText:
	{
		position: 'absolute',
		left: '-1px',
		top: '-1px',
		width: '100%',
		textAlign: 'center',
		fontWeight: 'bold',
		color: '#fff'
	},
	buttonImage:
	{
		width: '36px',
		height: '36px'
	},
	zoomInButton:
	{
		position: 'absolute',
		top: '8px',
		left: '8px',
		cursor: 'pointer'
	},
	zoomOutButton:
	{
		position: 'absolute',
		top: '8px',
		left: '48px',
		cursor: 'pointer'
	},
	closeButton:
	{
		position: 'absolute',
		top: '8px',
		cursor: 'pointer'
	},
	viewPort:
	{
		position: 'relative',
		border: '1px solid #071040',
		overflow: 'hidden'
	},
	bottomView:
	{
		position: 'absolute',
		left: '0px',
		top: '0px',
		width: '100%',
		height: '100%'
	},
	dragSurface:
	{
		position: 'absolute',
		left: '0px',
		top: '0px',
		width: '100%',
		height: '100%',
		opacity: '0',
		filter: 'alpha(opacity=0)',
		backgroundColor: '#fff'
		
	},
	topView:
	{
		position: 'absolute',
		left: '0px',
		top: '0px',
		width: '100%',
		height: '100%'
	},
	zoomThumb:
	{
		position: 'absolute',
		left: '0px',
		top: '0px',
		border: '1px solid #071040'
	},
	zoomThumbHighlight:
	{
		position: 'absolute',
		left: '0px',
		top: '0px',
		border: '1px solid #f00',
		backgroundColor: '#fff',
		opacity: '0.4',
		filter: 'alpha(opacity=40)'
	},
	waitLayer:
	{
		position: 'absolute',
		left: '0px',
		top: '0px',
		width: '100%',
		height: '100%',
		opacity: '0.2',
		filter: 'alpha(opacity=20)',
		backgroundColor: '#fff'
	},
	hourglass:
	{
		position: 'absolute',
		width: '32px',
		height: '32px'
	},
	label:
	{
		fontWeight: 'bold',
		width: '100%',
		textAlign: 'center',
		padding: '.5em 0',
		marginBottom: '.5em',
		borderBottom: '1px solid #e0e0e0',
		color: '#000'
	},
	triggerWrapper:
	{
		position: 'relative',
		cursor: Fly.ImageZoomer.prototype.resource('/cursor/magnify.cur')+', pointer'
	},
	thumbImg:
	{
		margin: '2px'
	}
};