function applyConfigObject(o,c){
	if(o && c && typeof c == 'object'){
        for(var p in c){
            o[p] = c[p];
		}
    }
    return o;
}

var Zoomer = Class.create();													//create new class
Zoomer.prototype = {															//class prototype

	//bindTo			: null,
	
	initialize: function(config){
		
		applyConfigObject(this, config);
		
		this.imagesToLoad = $$(".zoomer .item img").length;

		if (this.imagesToLoad > 0){
		
			this.imagesLoaded = 0;
		
			$$(".zoomer .item img").each(function(el){
			
				var pic = new Image();
				pic.src = el.src;
				pic.onload = function(that){
					return function(){
						that.imagesLoaded++;
						that.checkIfLoaded();
					}
				}(this);
			
			}.bind(this));
			//window.setTimeout(function(){
			this.render();
			//}.bind(this), 1000);
		
		}//else
	},//end initialize
	
	checkIfLoaded:function(){
		if (this.imagesToLoad == this.imagesLoaded){
			this.render();
		}
	},
	
	render: function(){
		this.smallPhotoContainer = this.el.down(".smallPhotoContainer");
		this.smallPhoto = this.el.down(".smallPhoto");
		this.magnifier = this.el.down(".magnifier");
		this.magnifier.style.visibility = "hidden";
		this.bigPhoto = this.el.down(".bigPhoto");
		
		this.items = this.el.down(".items");
		
		var firstItem = this.items.select(".item")[0];
		var firstItemImage = firstItem.down("img");
		firstItem.addClassName("selected");
		firstItem.style.marginTop = "0px";
	
		this.smallPhoto.src = firstItemImage.src;
		this.bigPhoto.src = firstItemImage.src;
	
		this.items.select(".item").each(function(el){
			
			//el.setOpacity(0.5);
			
			el.observe("click", function(ev){
				
				var elt = Event.findElement(ev, ".item");
				this.items.select(".item").each(function(el1){
					el1.removeClassName("selected");
					//el1.setOpacity(0.5);
				});
				
				//elt.setOpacity(1);
				elt.addClassName("selected");
				
				var img = elt.down("img");
				this.smallPhoto.src = img.src;
				this.bigPhoto.src = img.src;
				
				this.doLayout();
				//this.items.style.top = (this.el.getHeight() - this.items.getHeight()) / 2 + "px";
				//this.smallPhotoContainer.style.top = (this.el.getHeight() - this.smallPhotoContainer.getHeight()) / 2 + "px";
				
			}.bind(this));
			
		}.bind(this));
		
		//firstItem.setOpacity(1);
	
		this.doLayout();
		
		this.el.observe("mousemove", function(ev){
			var mousePosition = [Event.pointerX(ev), Event.pointerY(ev)];
			var elPosition = this.smallPhoto.cumulativeOffset();
			var elPositionR = this.smallPhotoContainer.positionedOffset();
			var position = [mousePosition[0] - elPosition[0], mousePosition[1] - elPosition[1]];

			if (mousePosition[0] > elPosition[0] && mousePosition[0] < elPosition[0] + this.smallPhoto.getWidth() && mousePosition[1] > elPosition[1] && mousePosition[1] < elPosition[1] + this.smallPhoto.getHeight()){
				
				this.ratio = this.bigPhoto.getWidth() / this.smallPhoto.getWidth();
				
				this.magnifier.style.visibility = "visible";
				this.magnifier.style.left = (position[0] + elPositionR[0] - (this.magnifier.getWidth() / 2)) + "px";
				this.magnifier.style.top = (position[1] + elPositionR[1] - (this.magnifier.getHeight() / 2)) + "px";
				
				
				this.bigPhoto.style.left = ((-1 * position[0] * this.ratio) + (this.magnifier.getWidth() / 2)) + "px";
				this.bigPhoto.style.top = ((-1 * position[1] * this.ratio) + (this.magnifier.getHeight() / 2)) + "px";
				
			}else{
				this.magnifier.style.visibility = "hidden";
			}

			//console.debug(elPosition+" -- "+elPositionR);
			//console.debug(Event.element(ev));

		}.bind(this));
	},//end render;
	
	doLayout: function(){
		//console.debug(this.el.getHeight()+" / "+this.items.getHeight());
		this.items.style.top = (this.el.getHeight() - this.items.getHeight()) / 2 + "px";
		this.smallPhotoContainer.style.top = (this.el.getHeight() - this.smallPhotoContainer.getHeight()) / 2 + "px";
	}

}