var ProductZoom = new Class({
	Implements:[Options, Events],
	
	options:{
		hideEmpty:true,
		previewBounds:{x:310, y:310},
		previewPadding:5,
		viewBounds:{x:261, y:261},
		thumbBounds:{x:72, y:72},
		view:null,
		viewWidth:318,
		viewHeight:200
	},
	
	initialize:function(preview, thumbs, options){
		this.preview = $(preview);
		this.thumbs = $$(thumbs);
		
		this.setOptions(options);
		this._getImagePaths();
		
		for (var i = this.urls.thumbs.length -1; i<this.thumbs.length; i++){
			this.thumbs[i].setStyle('display', 'none');
		}
		
		this.preview.empty();
		this.thumbs.each(function(thumb){
			thumb.empty();
		});
		
		this.preview.adopt(this._packImg(
			this.urls.previews[0], 
			this.urls.full[0]
		));
		
		for (var i=1; i<this.urls.thumbs.length; i++){
			this.thumbs[i-1].adopt(this._packImg(
				this.urls.thumbs[i],
				''
			));
		}
		
		//this._checkImgSizes();
		
		this.thumbs.addEvent('click', this.swap.bind(this));
		
		this.view = new Element('div', {
			styles:{
				position:'relative',
				width:this.options.viewWidth,
				overflow:'hidden'
			}
		});
		
		this.options.view.adopt(this.view);
		
		this.previewShade = new Element('div', {
			styles:{
				display:'none',
				'z-index':10,
				position:'absolute',
				left:0,
				top:0,
				width:'100%',
				height:'100%',
				backgroundColor:'#c3c3c3',
				opacity:0.25
			}
		});
		
		this.previewWindow = new Element('div', {
			styles:{
				display:'none',
				'z-index':20,
				position:'absolute',
				border:'1px solid #000',
				overflow:'hidden',
				cursor:'move'
			}
		});
		
		this.bound = {};
		this.bound.mousemove = this.onMouseMove.bindWithEvent(this);
	},
	
	showZoom:function(event){
		var fullSrc = this.preview.getElement('a').get('href');
		
		this.zoomImg = new Asset.image(fullSrc, {
			onload: this._showZoom.bind(this)
		});
		
		event.stopPropagation();
	},
	
	_showZoom:function(img){
		this.fireEvent('openzoom');
		this.preview.adopt(this.previewShade);
		this.preview.adopt(this.previewWindow);
	
		/*
		var fullSrc = this.preview.getElement('a').get('href');
		
		this.zoomImg = new Element('img', {
			src:fullSrc,
			'styles':{
				position:'absolute'
			}
		});
		*/
		
		this.zoomImg.setStyle('position', 'absolute');
		
		this.view.adopt(this.zoomImg);
		
		var height = this.options.viewBounds.y;
	
		this.view.setStyles({
			'display': 'block',
			'height': height
		});
		
		var fullImgSize = this.zoomImg.getSize();
		var previewImgSize = this.preview.getElement('img').getSize();
		
		this.zoom = fullImgSize.x / previewImgSize.x;
		this.zoomSize = fullImgSize.x * this.zoom;
		
		//console.log(fullImgSize.x);
		
		this.previewShade.setStyle('display', 'block');
		this.previewWindow.setStyles({
			'display': 'block',
			'width': Math.floor(this.options.viewWidth / this.zoom),
			'height': Math.floor(height / this.zoom),
			'background-color':'#fff'
		});
		
		this.previewWindowImg = new Element('img', {
			src:this.preview.getElement('img').get('src'),
			styles:{
				position:'absolute',
				height:this.preview.getElement('img').getSize().y,
				width:this.preview.getElement('img').getSize().x
			}
		});
		
		this.previewWindow.adopt(this.previewWindowImg);
		
		this._checkSize(this.previewWindowImg, this.options.previewBounds);
		
		var left = Math.floor((this.preview.getSize().x - this.previewWindow.getSize().x) / 2);
		var top = Math.floor((this.preview.getSize().y - this.previewWindow.getSize().y) / 2);
		
		this.previewWindow.setStyles({
			left:left,
			top:top
		});
		
		this.updateZoom();
		
		this.preview.addEvents({
			mouseenter:this.onMouseOver.bind(this),
			mouseleave:this.onMouseOut.bind(this)
		});
		
		$(document).addEvent('click', function(){
			this.hideZoom();
			$(document).removeEvents('click');
		}.bind(this));
	},
	
	hideZoom:function(){
		this.previewWindow.dispose();
		this.previewShade.dispose();
		this.previewWindow.empty();
		this.view.setStyle('display', 'none');
		this.view.empty();
		this.preview.removeEvents('mouseenter');
		this.preview.removeEvents('mouseleave');
		$(document).removeEvents('mousemove');
		this.fireEvent('closezoom');
	},
	
	updateZoom:function(){
		var correction = {
			x:2,
			y:1
		};
		
		if (Browser.Engine.trident){
			correction.x = correction.x + 2;
		}
		
		var left = this.preview.getElement('img').getPosition(this.previewWindow).x - correction.x;
		var top = this.preview.getElement('img').getPosition(this.previewWindow).y - correction.y;
	
		this.previewWindowImg.setStyles({
			left:left,
			top:top
		});
		
		left = left * this.zoom;
		top = top * this.zoom;
		
		this.zoomImg.setStyles({
			left:left,
			top:top
		});
	},
	
	onMouseMove:function(event){
		var client = event.page;
		var winPos = this.preview.getPosition(document);
		var winSize = this.previewWindow.getSize();
		
		var offset = {
			x: Math.floor((client.x - winPos.x) - (winSize.x / 2)),
			y: Math.floor((client.y - winPos.y) - (winSize.y / 2))
		};
		
		var bounds = {
			left: 0 + this.options.previewPadding,
			top: 0 + this.options.previewPadding,
			x: (this.options.previewBounds.x - winSize.x) + this.options.previewPadding,
			y: (this.options.previewBounds.y - winSize.y) + this.options.previewPadding
		};
		
		offset.x = (offset.x < bounds.left)? bounds.top : offset.x;
		offset.y = (offset.y < bounds.top)? bounds.top : offset.y;
		offset.x = (offset.x > bounds.x)? bounds.x : offset.x;
		offset.y = (offset.y > bounds.y)? bounds.y : offset.y;
		
		
		this.previewWindow.setPosition(offset);
		
		this.updateZoom();
	},
	
	onMouseOver:function(){
		$(document).addEvent('mousemove', this.bound.mousemove);
	},
	
	onMouseOut:function(){
		$(document).removeEvent('mousemove', this.bound.mousemove);
	},
	
	swap:function(event){
		var thumb = $(event.target);
		
		while (!this.thumbs.contains(thumb)){
			thumb = thumb.getParent();
		}
		
		var src = thumb.getElement('img').get('src');
		var thumbId = this.urls.thumbs.indexOf(src);
		
		src = this.preview.getElement('img').get('src');
		var previewId = this.urls.previews.indexOf(src);
		
		this.preview.empty();
		this.preview.adopt(this._packImg(
			this.urls.previews[thumbId],
			this.urls.full[thumbId]
		));
		
		thumb.empty();
		thumb.adopt(this._packImg(
			this.urls.thumbs[previewId],
			''
		));
		
		this._checkImgSizes();
		
		event.preventDefault();
	},
	
	_checkImgSizes:function(){
		this._checkSize(this.preview.getElement('img'), this.options.previewBounds);
		this.thumbs.each(function(thumb){
			var img = thumb.getElement('img');
			if ($defined(img)){
				this._checkSize(img, this.options.thumbBounds);
			}
		}, this);
	},
	
	_checkSize:function(img, bounds){
		if (img.get('width')) img.erase('width');
		if (img.get('height')) img.erase('height');
		var dim = img.getSize();
		
		if(dim.x > bounds.x){
			img.set('width', bounds.x);
		}
		
		if(img.getSize().y > bounds.y){
			if (img.get('width')){
				img.erase('width');
			}
			img.set('height', bounds.y);
			img.set('width', bounds.y * (dim.x / dim.y));
		}
	},
	
	_packImg:function(src, href){
		var a = new Element('a', {
			href: href
		});
		
		/*
		var img = new Element('img', {
			src: src
		});
		*/
		
		var img = new Asset.image(src, {
			onload:this._checkImgSizes.bind(this)
		});
		
		a.adopt(img);
		return a;
	},
	
	_getImagePaths:function(){
		this.options.getImagePaths.apply(this);
	}
});