/* FIND ELEMENENT COORDINATES */
function find_coordinates(obj){

	var curleft = curtop = 0;
	
	//If browser supports offsetParent
	if(obj.offsetParent){
				
		//Each time we find a new object, we add it's offsetLeft and offsetTop to curleft and curtop
		do{
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;		
		} while(obj = obj.offsetParent);
		
		return [curleft,curtop];
		
	}
}

/* FLY TO */
function fly_to(product_thumb_id,target_id){

	//check for existance of an already-cloned-object (in case of a double click)
	if(document.getElementById(product_thumb_id+'_clone')){
		return true;
	}
	
	//aknowledge object to clone and target object
	to_clone = document.getElementById(product_thumb_id);
	target_object = document.getElementById(target_id);
	//clone object
	new_obj = to_clone.cloneNode(true);
	//immediately change new_obj's ID so that it remains unique
	new_obj.id = to_clone.id+'_clone';
	
	//Get coordinates - left/top (x/y)
	new_obj.start_coordinates = find_coordinates(to_clone);
	//Get object's target coordinates
	new_obj.target_coordinates = find_coordinates(target_object);
	//Set initial distance
	new_obj.distance_x = (new_obj.target_coordinates[0] - new_obj.start_coordinates[0]);
	new_obj.distance_y = (new_obj.target_coordinates[1] - new_obj.start_coordinates[1]);
	
	//Set new_obj's positional styles to absolute positioning based on original objects coords
	new_obj.style.position = 'absolute';
	new_obj.style.left = new_obj.start_coordinates[0]+'px';
	new_obj.style.top = new_obj.start_coordinates[1]+'px';
	new_obj.style.borderWidth = '3px';
	new_obj.style.borderStyle = 'dashed';
	new_obj.style.borderColor = '#000000';
	new_obj.style.filter = 'alpha(opacity=50)';
	new_obj.style.opacity = '.50';
	
	//Intert clone object into DOM
	document.body.appendChild(new_obj);
	
	//Move new_obj to to_clone object's coordinates
	var steps = 30;//how many steps should it take within the timeline (specified below).  This changes how smooth the animation is
	var timeline = 500;//ms from new_obj to its target
	var fade_distance = 180;//at what range (in px) from the new_obj to its target, should it begin to fade
	var shrink_distance = 3000000;//at what range (in px) from the new_obj to its target, should it begin to shrink (if element is an img)

	var count = 0;
	var inter=setInterval(doMove,(timeline/steps));
	function doMove(){
		//Set new absolute position offsets
		new_obj.style.left = new_obj.start_coordinates[0]+((count+1)*(new_obj.distance_x/steps))+'px';
		new_obj.style.top = new_obj.start_coordinates[1]+((count+1)*(new_obj.distance_y/steps))+'px';
		//Set direct distance
		new_obj.direct_distance = Math.sqrt(( Math.pow((new_obj.target_coordinates[0] - new_obj.style.left.replace("px","")),2) + Math.pow((new_obj.target_coordinates[1] - new_obj.style.top.replace("px","")),2) ));		
		//start to fade out
		if(new_obj.direct_distance <= fade_distance){
			//if not defined, define fade amount (per remaining step)
			if(!new_obj.fade_amount){
				//work out how much we should fade by on each increment
				new_obj.fade_amount = (100/(steps - (count-1))); //divided by 2 because we already start off at 50% opacity
			}
			//fade
			new_obj.style.filter = 'alpha(opacity='+(new_obj.fade_amount * (steps - (count-1))) /2+')';
			new_obj.style.opacity = ((new_obj.fade_amount * (steps - (count-1))) /2) /100;
		}
		//start to shrink - if element is an img
		if(new_obj.nodeName.toLowerCase() == 'img' && new_obj.width > 0 && new_obj.height > 0 && new_obj.direct_distance <= shrink_distance){
			//if not defined, define shrink amount (per remaining step)
			if(!new_obj.shrink_width){
				//work out how much we should shrink by on each increment
				new_obj.shrink_width = (new_obj.width/(steps - (count-1)));
			}
			if(!new_obj.shrink_height){
				//work out how much we should shrink by on each increment
				new_obj.shrink_height = (new_obj.height/(steps - (count-1)));
			}
			//shrink
			new_obj.width = new_obj.shrink_width * (steps - (count-1));
			new_obj.height = new_obj.shrink_height * (steps - (count-1));
		}
		
		if(count == steps-1){
			//remove new_obj from the DOM
			document.body.removeChild(new_obj);

			//stop the function from running anymore
			clearInterval(inter);
			
			return true;
		}
		
		count++
	}

}