/**
 * @author itmldata
 */
/**
 * Parallel object manager
 */
var parallel = new Parallel();
/**
 * Number of objects to slide
 */
var numElements = 3;
/**
 * Index of selected object
 */
var selectedIndex = 1;
/**
 * This function parse style dimension string (with "px" unit) and return numeric value
 * @param {String} strPos
 * @return  {Number}
 */
function pos(strPos){
	return Number(strPos.substr(0,strPos.indexOf("px")));
}
/**
 * This function  manage sliding box
 * @param {Number} clId
 */
function clickBox(clId){
	parallel = new Parallel();
	
	var totPrevDistance = 0;
	var prevDistance = 0;
	var box = document.getElementById('box'+clId);
	var textBox = document.getElementById('textbox'+clId);
	var maxWidth = pos(document.getElementById('textbox'+selectedIndex).style.width);
	selectedIndex = clId;
	for(var j=1;j<=(clId-1);j++){
		
		var prevBox = document.getElementById('box'+j);
		var prePrevBox = document.getElementById('box'+(j-1));
		prevDistance = ((prePrevBox))?((prePrevBox.offsetLeft+prePrevBox.offsetWidth)-prevBox.offsetLeft+prevDistance):0;
		
		var fromBox = pos(prevBox.style.left);
		var toBox = prevDistance+pos(prevBox.style.left);
		if(fromBox!=toBox){
			parallel.addChild(new Tween(prevBox.style,'left',Tween.strongEaseOut,fromBox,toBox,1,'px'));		
		}
		
		var prevTextBox = document.getElementById('textbox'+j);
		var fromBox = pos(prevTextBox.style.width);
		var toBox = 1;
		if(fromBox!=toBox)parallel.addChild(new Tween(prevTextBox.style,'width',Tween.strongEaseOut,fromBox,toBox,1,'px'));
		
	}
	var prevBox = document.getElementById('box'+(clId-1));
	totPrevDistance +=(prevBox)?((prevBox.offsetLeft+prevBox.offsetWidth)-box.offsetLeft+prevDistance):0;
	var fromBox = pos(box.style.left);
	var toBox = totPrevDistance+pos(box.style.left);
	if(fromBox!=toBox){
		parallel.addChild(new Tween(box.style,'left',Tween.strongEaseOut,fromBox,toBox,1,'px'));
	}
	for(var j=(clId+1);j<=numElements;j++){
		
		var nextBox = document.getElementById('box'+j);					
		var fromBox = pos(nextBox.style.left);
		var toBox = 0;
		if(fromBox!=toBox){
			parallel.addChild(new Tween(nextBox.style,'left',Tween.strongEaseOut,fromBox,toBox,1,'px'));
		}
		
		
		var nextTextBox = document.getElementById('textbox'+j);
		var fromBox = pos(nextTextBox.style.width);
		var toBox = 1;
		if(fromBox!=toBox){
			var prevTween = new Tween(nextTextBox.style,'width',Tween.strongEaseOut,fromBox,toBox,1,'px');
			parallel.addChild(prevTween);
		}
		
	}
	parallel.addChild(new Tween(textBox.style,'width',Tween.strongEaseOut,pos(textBox.style.width),maxWidth,1,'px'));
	parallel.start();
}