var container = $("div#container"),
	div1 = $("div#div1"),
	div2 = $("div#div2"),
	div3 = $("div#div3"),
	elements = $("div.element"),
	positionsArray = [],//this array will contain every element position before scale down
	inZoom = false;


$.each(elements, function(index, element)
{
	//we create an object with the element's ID and position
	//we use position to keep it relative to the parent and not the document
	//for more info check the following: https://api.jquery.com/position/
	var originalLeft = {'id':$(element).attr('id'),'positionLeft':$(element).position().left};
	//we add that particular position to the array
	positionsArray.push(originalLeft);
});

//we scale down the container and therefore it's children
TweenMax.set(container, {scale:.25, transformOrigin:'0 0'});

elements.click(function(e)
{
	//if the container remains scale down proceed
	if(!inZoom)
	{
		//we loop through the array with the objects
		for(var index in positionsArray)
		{
			//we chek if the ID of the element clicked matches any of the array
			//in order to see what index the ID corresponds to 
			if($(e.target).attr('id') == positionsArray[index].id)
			{
				//we use the index and retrieve the element's left position
				//and tween the container to the left in that amount but negative
				TweenMax.to(container, 1,{scale:1, left:(-positionsArray[index].positionLeft) });
				inZoom = true;//the element is zoomed
			}
		}
	}
	else
	{
		//we return everything to normal
		TweenMax.to(container, 1, {scale:.25, left:0});
		inZoom = false;
	}
});