var c_images = 0;
var interval;
var speed = 70;
var vel_tmp;
var drag_object = null;
var mouse_offset = null;
var mouse_coords = null;
var cx, cy;	
var steps = 10;
var l_f, r_f, w_f, h_f;


function getPosition(e)
{
	var left = 0;
	var top = 0;
	
	while (e.offsetParent) {
		left += e.offsetLeft;
		top += e.offsetTop;
		e = e.offsetParent;
	}

	left += e.offsetLeft;
	top += e.offsetTop;
	
	return {x:left, y:top};
}


function mouseCoords(ev)
{
	ev = ev || window.event;
		
	if(ev.pageX || ev.pageY) {
		return {x:ev.pageX, y:ev.pageY};
	}
	
	return {
			x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
			y:ev.clientY + document.body.scrollTop - document.body.clientTop
		};
}


function mouseMove(ev)
{
	ev = ev || window.event;

	var mouse_pos = mouseCoords(ev);

	if(drag_object) {
		setObjectPos(drag_object, mouse_pos.x - mouse_offset.x, mouse_pos.y - mouse_offset.y)
	}
	
	return false;
}


function mouseUp(ev)
{
	drag_object = null;
}	


function getMouseOffset(target, ev)
{
	ev = ev || window.event;

	var docPos = getPosition(target);
	var mousePos = mouseCoords(ev);
	
	return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}


function setObjectPos(obj, x, y)
{
	if(obj.hasChildNodes())
		obj.childNodes[0].style.cursor = 'move';
		
	obj.style.left = x + 'px';
	obj.style.top = y + 'px';
}


function getWindowSize()
{
	if(window.innerWidth) {
		return { w:window.innerWidth, h:window.innerHeight };
	}
	else {
		return { w:document.body.offsetWidth, h:document.body.offsetHeight };
	}
}


function getViewportCoords()
{
	if(window.pageXOffset) {
		return { x:window.pageXOffset, y:window.pageYOffset };	
	}
	else if(document.documentElement && document.documentElement.scrollTop) {
		return { x:document.documentElement.scrollLeft, y:document.documentElement.scrollTop };	
	}
	else if(document.body) {
		return { x:document.body.scrollLeft, y:document.body.scrollTop };	
	}
	
	return { x:0, y:0 };
}

function runScaler(current_image, orig_image_url)
{
	var current_image_pos = getPosition(current_image);

	var current_image_holder = document.getElementById('currentImageHolder' + c_images);

	// wrap image with div
	if(!current_image_holder) {	
		current_image_holder = document.createElement('DIV');
		current_image_holder.id = 'currentImageHolder' + c_images;
		current_image_holder.style.width = current_image.width + 'px';
		current_image_holder.style.height = current_image.height + 'px';
		
		var p = current_image.parentNode;
		p.appendChild(current_image_holder);
		
		current_image_holder.appendChild(current_image);
	}

	var image_lodaer = document.createElement('DIV');
	image_lodaer.id = 'imageLoader';
	image_lodaer.style.width = current_image.offsetWidth + 'px';
	image_lodaer.style.height = current_image.offsetHeight + 'px';
	image_lodaer.style.left = current_image_pos.x + 'px';
	image_lodaer.style.top = current_image_pos.y + 'px';
	
	document.body.appendChild(image_lodaer);
	
	var orig_image = new Image();
	orig_image.onload = function() { smoothScale(current_image, orig_image); }; 
	orig_image.src = orig_image_url;
}


function smoothScale(current_image, orig_image, mode)
{
	if(!mode) mode = 'inc';
	
	var image_lodaer = document.getElementById('imageLoader');
	var current_image_holder = document.getElementById('currentImageHolder' + c_images);
	var ow = orig_image.width;
	var oh = orig_image.height;
	
	image_lodaer.parentNode.removeChild(image_lodaer);
		
	var image_holder = document.createElement('DIV');
	image_holder.className = 'imageHolder';
	image_holder.id = 'imageHolder' + c_images;
	
	var current_image_pos = getPosition(current_image);
	//var center_x = Math.round(current_image_pos.x + current_image.width / 2);
	//var center_y = Math.round(current_image_pos.y + current_image.height / 2);

	image_holder.style.left = (current_image_pos.x - 1) + 'px'; 		
	image_holder.style.top = (current_image_pos.y - 1) + 'px'; 		
	image_holder.style.width = current_image.width + 'px';
	image_holder.style.height = current_image.height + 'px';
	
	image_holder.appendChild(orig_image);
	image_holder.setAttribute('orig_width', ow);
	image_holder.setAttribute('orig_height', oh);
	image_holder.setAttribute('cur_width', current_image.width);
	image_holder.setAttribute('cur_height', current_image.height);
	image_holder.setAttribute('x', current_image_pos.x);
	image_holder.setAttribute('y', current_image_pos.y);
	//image_holder.setAttribute('center_x', center_x);
	//image_holder.setAttribute('center_y', center_y);

	image_holder.setAttribute('coef_x', parseFloat((orig_image.width - current_image.width) / steps));
	image_holder.setAttribute('coef_y', parseFloat((orig_image.height - current_image.height) / steps));

	orig_image.style.width = '100%'; 
	orig_image.style.height = '100%'; 
	orig_image.style.cursor = 'pointer';
	
	document.body.appendChild(image_holder);

	var viewport = getWindowSize();
	var viewport_offset = getViewportCoords();
	var new_x = ((viewport.w - ow) / 2) + viewport_offset.x;
	var new_y = ((viewport.h - oh) / 2) + viewport_offset.y;

	cx = ( -(current_image_pos.x - new_x)) / steps;
	cy = ( -(current_image_pos.y - new_y)) / steps;

	w_f = current_image.width;
	h_f = current_image.height;

	pos = getPosition(image_holder);
	l_f = pos.x;
	t_f = pos.y;

	if(current_image_holder)
		current_image.style.display = 'none';
	
	interval = window.setInterval('doScale("' + image_holder.id + '", "' + mode + '", ' + c_images + ')', 5);
	c_images++;
}


function doScale(holder_obj, mode, num)
{
	holder_obj = document.getElementById(holder_obj);
	if(!holder_obj)
		return;

	var pos = getPosition(holder_obj);
	var w, h, l, t;
	
	var inc_x = parseFloat(holder_obj.getAttribute('coef_x'));
	var inc_y = parseFloat(holder_obj.getAttribute('coef_y'));
	
	if(mode == 'inc') {
		w_f += inc_x;
		h_f += inc_y;
	}
	else {
		w_f -= inc_x;
		h_f -= inc_y;
	}

	w = Math.round(w_f); 
	h = Math.round(h_f);

	l_f += cx;
	t_f += cy;
	l = Math.round(l_f);
	t = Math.round(t_f);
	 
	if((w > holder_obj.getAttribute('orig_width') || h > holder_obj.getAttribute('orig_height')) && mode == 'inc') {
		//holder_obj.childNodes[0].style.width = (parseInt(holder_obj.getAttribute('orig_width')) ) + 'px';
		//holder_obj.childNodes[0].style.height = (parseInt(holder_obj.getAttribute('orig_height'))) + 'px';
		holder_obj.style.width = (parseInt(holder_obj.getAttribute('orig_width')) ) + 'px';
		holder_obj.style.height = (parseInt(holder_obj.getAttribute('orig_height'))) + 'px';
		//holder_obj.style.left = Math.ceil(holder_obj.getAttribute('center_x') - holder_obj.getAttribute('orig_width') / 2) + 'px';
		//holder_obj.style.top = Math.ceil(holder_obj.getAttribute('center_y') - holder_obj.getAttribute('orig_height') / 2) + 'px';
		
		// now we can drag
		holder_obj.childNodes[0].onselectstart = function () { return false };
		holder_obj.onselectstart = function () { return false };
		
		holder_obj.onmousedown = function(ev) {
				var button = ev ? ev.which : window.event.button;
					
				if(button == 1) {
					drag_object = holder_obj;
					mouse_offset = getMouseOffset(holder_obj, ev);
					mouse_coords = mouseCoords(ev);
					return false;
				}
			};

		holder_obj.onmouseup = function(ev) {
				var button = ev ? ev.which : window.event.button;
				if(button == 1) {
					drag_object = null;
					
					if(holder_obj.hasChildNodes())
						holder_obj.childNodes[0].style.cursor = 'pointer';

					var new_mouse_coords = mouseCoords(ev);
					if(new_mouse_coords.x == mouse_coords.x && new_mouse_coords.y == mouse_coords.y) {
						pos = getPosition(holder_obj);
						cx = (holder_obj.getAttribute('x') - pos.x) / steps;
						cy = (holder_obj.getAttribute('y') - pos.y) / steps;
						
						l_f = pos.x;
						t_f = pos.y;
						w_f = holder_obj.offsetWidth;
						h_f = holder_obj.offsetHeight;

						interval = window.setInterval('doScale("' + holder_obj.id + '", "dec", ' + num + ')', 5); 
					} 
					return false;
				}
			};

		clearInterval(interval);
		return;
	}
	
	if((w < holder_obj.getAttribute('cur_width') || h < holder_obj.getAttribute('cur_height')) && mode == 'dec') {
		var current_image_holder = document.getElementById('currentImageHolder' + num);
		
		holder_obj.parentNode.removeChild(holder_obj);

		if(current_image_holder)
			current_image_holder.childNodes[0].style.display = 'block';

		clearInterval(interval);
		return;
	}
	
	holder_obj.style.width = w + 'px';
	holder_obj.style.height = h + 'px';
	holder_obj.style.left = l + 'px';
	holder_obj.style.top = t + 'px';

}


document.onmousemove = mouseMove;
document.onmouseup = mouseUp;