// Global Variables:
_initial = true;
_firstElement = true;
_allSmoothBoxElementObjects = new Array();
_initialHeight = 0
_initialWidth = 0
_boxElementsTotalHeight = 0;
_boxElementsTotalWidth = _initialWidth;
_windowPuffer = 10;
_puffer = 20;
_smoothSpeed = 700;
_intervalTime = 500;

// Determine the width of the browser-window:
_windowWidth = document.documentElement.clientWidth - 50;

function initSmoothJS(smoothJSContainerId, smoothJSBoxTagName) {
	
	allChildren = $('#'+smoothJSContainerId).children();
	
	allChildren.each(function() {
		
		if ($(this)[0].tagName == smoothJSBoxTagName) {
			
			if (_firstElement) {

				_initialHeight = $(this).offset().top;
				_initialWidth = $(this).offset().left;
				_boxElementsTotalHeight = 0;
				_boxElementsTotalWidth = _initialWidth;

				_firstElement = false;
			}
			
			_allSmoothBoxElementObjects.push($(this));
		}
  });
	
	smooth(smoothJSContainerId);
	
	if (_initial) setInterval("intervalSmoothJS('" + smoothJSContainerId + "', '" + smoothJSBoxTagName + "')", _intervalTime);
}

function intervalSmoothJS(smoothJSContainerId, smoothJSBoxTagName) {
	
	_initial = false;
	
	if ((document.documentElement.clientWidth - _windowPuffer) != _windowWidth) {
		
		_windowWidth = document.documentElement.clientWidth - _windowPuffer;
		
		_allSmoothBoxElementObjects = new Array();
		_boxElementsTotalHeight = 0;
		_boxElementsTotalWidth = _initialWidth;
		
		initSmoothJS(smoothJSContainerId, smoothJSBoxTagName);
	}
}

function smooth(smoothJSContainerId) {
	
	for (var i = 0; i < _allSmoothBoxElementObjects.length; i++) {
		
		smoothBoxObject = _allSmoothBoxElementObjects[i];
		
		smoothBoxObjectWidth = parseInt(smoothBoxObject.width());
		smoothBoxObjectHeight = parseInt(smoothBoxObject.height());
		
		if ((_boxElementsTotalWidth + smoothBoxObjectWidth) < _windowWidth - 50) {
			
			// Top:
			smoothBoxObjectTop = _boxElementsTotalHeight;
			
			// Left:
			_boxElementsTotalWidth += _puffer;
			smoothBoxObjectLeft = _boxElementsTotalWidth;
			_boxElementsTotalWidth += smoothBoxObjectWidth;
			
			// Animation:
			if (_initial) {
				
				smoothBoxObject.css('position', 'absolute');
				smoothBoxObject.css('top', smoothBoxObjectTop);
				smoothBoxObject.css('left', smoothBoxObjectLeft);
				smoothBoxObject.css('width', smoothBoxObjectWidth);
				// smoothBoxObject.css('height', smoothBoxObjectHeight);
			}
			else smoothBoxObject.animate({top: smoothBoxObjectTop, left: smoothBoxObjectLeft}, _smoothSpeed);
		}
		else {
			
			// Left:
			_boxElementsTotalWidth = _initialWidth;
			_boxElementsTotalWidth += _puffer;
			smoothBoxObjectLeft = _boxElementsTotalWidth;
			_boxElementsTotalWidth += smoothBoxObjectWidth;
			
			// Top:
			_boxElementsTotalHeight += _puffer;
			_boxElementsTotalHeight += smoothBoxObjectHeight;
			smoothBoxObjectTop = _boxElementsTotalHeight;
			
			// Animation:
			if (_initial) {
				
				smoothBoxObject.css('position', 'absolute');
				smoothBoxObject.css('top', smoothBoxObjectTop);
				smoothBoxObject.css('left', smoothBoxObjectLeft);
				smoothBoxObject.css('width', smoothBoxObjectWidth);
				// smoothBoxObject.css('height', smoothBoxObjectHeight);
			}
			else smoothBoxObject.animate({top: smoothBoxObjectTop, left: smoothBoxObjectLeft}, _smoothSpeed);
		}
		
		$('#'+smoothJSContainerId).css('height', _boxElementsTotalHeight + smoothBoxObjectHeight);
	}
}