var Zoom = new Class ({
	
	Implements: [Options], 
		
    options: {  	
    	dim : 200
    },
	
	initialize: function(options) {
		this.setOptions(options);
		this.dim = this.options.minified;
		this.zoom = new Array;
		this.images = new Array;
		this.containers = new Array;    
		var containers = $$('.'+this.options.containers);
		
		containers.each(function(item,index) {
			this.containers.push(item);			
			this.images.push(item.getElement('img'));
			this.zoom.push(item.getElement('.zoom'));
		}.bind(this));
		this.setup();
	},
	
	
	setup: function() {
		this.images.each(function(item,key) {
			var parent = this.containers[key];
			var zoom = this.zoom[key];
			parent.setStyle('cursor','pointer');
			
			item.store('fx',new Fx.Morph(item,{duration: 500, transition: 'quad:in'}));
			item.store('ox',item.getSize().x);
			item.store('oy',item.getSize().y);
			item.store('nx',this.dim);
			item.store('ny',this.dim);
			
			item.set('zoomed',0);
						
			item.setStyles({
				'padding':10,
				'background':'#fff',
				'border':'1px solid #ddd',
				'width':item.retrieve('nx'),		
				'height':item.retrieve('ny')		
			});

			item.addEvent('click',function() {
				
				if(item.get('zoomed') == 1) {
					item.retrieve('fx').start({'width':item.retrieve('nx'),'height':item.retrieve('ny')}).addEvent(
						'onComplete',function(){
							zoom.setStyles({'background-position':'0 0'});	
							parent.setStyles({'margin-right':10});
							(function(){(window).scrollTo(0,0);}).delay(100);	
						}.bind(this));
					item.set('zoomed',0);
					
				} 
				else {
					item.retrieve('fx').start({'width':item.retrieve('ox'),'height':item.retrieve('oy')}).addEvent(
						'onComplete', function(){
							zoom.setStyles({'background-position':'0 -32px'});
							parent.setStyles({'margin-right':0});
							(function(){(window).scrollTo(0,parent.getPosition().y);}).delay(100);							
						}.bind(this));
					
					item.set('zoomed',1);
				}
			}.bind(this))
		}.bind(this))
	}
	
});


window.addEvent('load', function() {
	
	new Zoom({
		'containers' : 'maps',
		'minified' : 250
	});
});