/************************************************************************************************************
Picture Zoom
Copyright (C) September 2010  DTHMLGoodies.com, Alf Magne Kalleland

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
written by Alf Magne Kalleland.

Alf Magne Kalleland, 2010
Owner of DHTMLgoodies.com

************************************************************************************************************/




if(!window.DG) {
  window.DG = {};
};



DG.PictureZoom = new Class({
	config: {},
	initialize: function(config){

	},
	images: {},

	internal : {
		isBusy : false,
		currentWidth : 0,
		currentHeight : 0,
		currentZIndex : 1
	},

	addPicture: function(el){
		this._setImageProperties(el);
		$(el).addEvent('click', this._initZoom.bind(this));
	},

	_setImageProperties: function(el){
		var id = $(el).id;
		var url = this._getUrlToLargePicture(el);
		var img = new Element('img');
		img.setProperty('src', url);
		img.setProperty('refId', id);
		img.addClass('dg-picture-zoom-large');
		$(document.body).adopt(img);

		var coordinates = $(el).getCoordinates();
		this.images[id] = {
			small: {
				x: coordinates.left,
				y: coordinates.top,
				width : coordinates.width,
				height : coordinates.height
			},
			large: {
				img: img,
				width: 0,
				height: 0,
				sizeRatio : 0,
				xRatio : 0,
				yRatio : 0
			}
		}

		img.setStyles( {
			display : 'none',
			position : 'absolute',
			top : coordinates.top,
			left : coordinates.left
		});

		$(img).addEvent('click', this._initZoomOut.bind(this));
	},

	_getSizeOfLargeImage : function(id) {
		var obj = this.images[id];
		if(obj.large.width) {
			return {
				x : obj.large.width,
				y : obj.large.height
			}
		}else{
			var size = obj.large.img.measure(function(){
				return this.getSize();
			});
			return size;
		}

	},

	_setResizeProperties: function(el){
		var id = $(el).id;
		var obj = this.images[id];
		var size = this._getSizeOfLargeImage(id);

		obj.large.width = size.x;
		obj.large.height = size.y;
		obj.large.sizeRatio = size.x / size.y;
		obj.large.xRatio = obj.large.yRatio = 0.5;

		if(obj.large.height/2 > obj.small.y) {
			obj.large.yRatio *= (obj.small.y / (obj.large.height/2));
		}
		if(obj.large.width/2 > obj.small.x) {
			obj.large.xRatio *= (obj.small.x / (obj.large.width/2));
		}

	},

	_initZoom: function(e){

		if(this.internal.isBusy) {
			return;
		}
		this.internal.isBusy = true;
		var el = e.target;

		this._setResizeProperties(el);
		this._setInitialCssProperties(el);

		var id = $(el).id;
		var obj = this.images[id];
		this.internal.currentWidth = obj.small.width;
		this.internal.currentHeight = obj.small.height;
		this._increaseZIndex(id);

		this._zoom(id, 'out');
	},

	_zoom : function(id, direction) {
		var obj = this.images[id];
		var multiply = 1;
		if (direction == 'in') {
			multiply = -1;
		}
		this.internal.currentWidth = this.internal.currentWidth + (20 * obj.large.sizeRatio * multiply);
		this.internal.currentHeight = this.internal.currentHeight + (20 * multiply);

		leftOffset = (this.internal.currentWidth - obj.small.width) * obj.large.xRatio;
		topOffset = (this.internal.currentHeight - obj.small.height) * obj.large.yRatio;

		if ((direction == 'out' && this.internal.currentWidth <= obj.large.width)
		|| (direction == 'in' && this.internal.currentWidth >= obj.small.width)) {
			obj.large.img.setStyles({
				top : obj.small.y - topOffset,
				left : obj.small.x - leftOffset,
				width: this.internal.currentWidth,
				height: this.internal.currentHeight
			});

			this._zoom.delay(20, this, [id, direction]);
		}else{
			if(direction == 'in') {
				obj.large.img.setStyle('display','none');
			}
			this.internal.isBusy = false;
		}
	},

	_initZoomOut : function(e) {
		var id = $(e.target).getProperty('refId');
		if(this.internal.isBusy) {
			return;
		}
		this._increaseZIndex(id);
		var obj = this.images[id];
		this.internal.currentWidth = obj.large.width;
		this.internal.currentHeight = obj.large.height;
		this._zoom(id, 'in');
	},

	_increaseZIndex : function(id) {
		this.internal.currentZIndex ++;
		this.images[id].large.img.setStyle('z-index', this.internal.currentZIndex);
	},

	_setInitialCssProperties : function(el) {
		var id = $(el).id;
		var obj = this.images[id];

		obj.large.img.setStyles({
			display :'',
			width : obj.small.width,
			height : obj.small.height
		});

		var coordinates = $(el).getPosition();
		obj.small.x = coordinates.x;
		obj.small.y = coordinates.y;

	},

	_getUrlToLargePicture: function(el){
		var src = $(el).getProperty('src');
		var url = src.replace(/^.*?url=(.*?)/gi, '$1');
		url = url.replace(/(.*?)(&.*$)/gi, '$1');
		return url;
	}
});