// JavaScript Document

var needCard_div_obj = [];					// references to entire div objects
var needCard_corner_top_div_obj = [];		// references to top part of div objects
var needCard_corner_bottom_div_obj = [];	// references to bottom part of div objects
var needCard_gradient_bottom_div_obj = []	//
var needCard_solution_div_obj = [];			//
var needCard_approach_div_obj = [];			//
var needCard_zIndexes = [];					// needCards ordered by z-index
var needCard_status = [];					// needCards status: ready, fadeIn, constant, fadeOut
var needCard_opacity =[];					// opacity for bottom part of needCards
var needCard_timer =[];						// timer for needCards

var gradientStart			= 0.5;			// when to start gradient animation
var gradientEnd				= 1.0;			// when to end gradient animation
var showingApproachDuration = 2000;			// duration of animating from showingNeeds to ShowingApproach
var showingApproachInterval = 20;			// animation interval
var needCardZoffSet			= 500;			// minimum z-index

var needCards = [];				// transformations of needCards
// needCards parameters			  mx    my  htop  hbot hReady hNeeds hApproach
needCards['hobsoft']		= [  285,    0,   340,  260,     0,     0,    0];  
needCards['filestructure']	= [    0,    0,   260,  240,     0,     0,    0]; 
needCards['management']		= [    0,    0,   270,  180,     0,     0,    0]; 
needCards['editing']		= [    0,    0,   275,  270,     0,     0,    0];  
needCards['mastering']		= [    0,    0,   190,  220,     0,     0,    0];
needCards['hardware']		= [    0,    0,   250,  250,     0,     0,    0];  
needCards['security']		= [    0,    0,   230,  240,     0,     0,    0];  
needCards['backup']			= [    0,    0,   170,  180,     0,     0,    0];  
needCards['workflows']		= [    0,    0,   260,  250,     0,     0,    0];  
needCards['automation']		= [    0,    0,   270,  180,     0,     0,    0];  
needCards['tracking']		= [    0,    0,   260,  180,     0,     0,    0];  

// following variables x1, y1 ... are provided as easy references the matching variables in the 'slides' array
// example of reference to the y2 value of array 'workflows': needCards['workflows'][y2]
var mx			= 0; 		// horisontal position
var my			= 1;		// vertical position
var htop		= 2;		// needCards height top
var hbot		= 3;		// needCards height total
var hReady		= 4;
var hNeeds		= 5;
var hApproach	= 6;



function showNeeds (objname) {
	if (needCard_status[objname] != 'ready') {
		logIt('Can not showNeeds because status of ' + objname + ' is not \'ready\' but \'' + needCard_status[objname] + '\'');
		return;
	}

	document.getElementById('black_overlay').style.visibility = 'visible';
	popNeedCard(objname);

	needCard_status[objname]								= 'animatingToShowingNeeds';
	needCard_div_obj[objname].style.visibility				= 'visible';
	needCard_div_obj[objname].style.height					= needCards[objname][hNeeds] + 'px';
	needCard_corner_top_div_obj[objname].style.height		= needCards[objname][hNeeds] - 10 + 'px';
	needCard_approach_div_obj[objname].style.visibility		= 'visible';
	needCard_solution_div_obj[objname].style.bottom			= - needCards[objname][hApproach] + 'px';
	needCard_status[objname]								= 'showingNeeds';
}

function showApproach (objname) {
	popNeedCard(objname);
	var timerName = 'needCard_' + objname;
	var hN = needCards[objname][hNeeds];
	var hA = needCards[objname][hApproach];

	needCard_gradient_bottom_div_obj[objname].style.visibility	= 'visible';

	if (needCard_status[objname] == 'showingNeeds') {
		needCard_status[objname]								= 'animatingToShowingApproach';
		startTime[timerName] = (new Date()).getTime();
		needCard_approach_div_obj[objname].style.visibility		= 'hidden';
	}

	elapsed[timerName] = new Date().getTime() - startTime[timerName];
	var progress = elapsed[timerName] / showingApproachDuration;

	if (progress >= 1) {
		needCard_div_obj[objname].style.height					= hA + 'px';
		needCard_corner_top_div_obj[objname].style.height		= hA - 10 + 'px';
		needCard_gradient_bottom_div_obj[objname].style.bottom	= 0 + 'px';
		needCard_solution_div_obj[objname].style.bottom			= 0 + 'px';
		needCard_status[objname]								= 'showingApproach';
		return;
	}
	
	needCard_div_obj[objname].style.height						= interpolate(hN, hA, progress, 0.0, 0.2) + 'px';
	needCard_corner_top_div_obj[objname].style.height			= interpolate(hN - 10, hA - 10, progress, 0.0, 0.2) + 'px';
	needCard_gradient_bottom_div_obj[objname].style.bottom		= interpolate(-hA, 0, progress, 0.20, 0.35) + 'px';
	needCard_solution_div_obj[objname].style.bottom				= interpolate(-hA, 0, progress, 0.0, 1.0) + 'px';
		
	needCard_timer[objname] = setTimeout('showApproach(\'' + objname + '\');', showingApproachInterval);
	
}

function setNeedCards () {
	logIt('setNeedCards ()');

	var z = 0;
	for (objname in needCards)	{
		needCard_div_obj[objname] = document.getElementById('needCard_' + objname);
		needCard_corner_top_div_obj[objname] = document.getElementById('needCard_' + objname + '_corner_top');
		needCard_corner_bottom_div_obj[objname] = document.getElementById('needCard_' + objname + '_corner_bottom');
		needCard_gradient_bottom_div_obj[objname] = document.getElementById('needCard_' + objname + '_gradient_bottom');
		needCard_solution_div_obj[objname] = document.getElementById('needCard_' + objname + '_solution');
		needCard_approach_div_obj[objname] = document.getElementById('needCard_' + objname + '_approach');

		resetNeedCard(objname);
		needCard_zIndexes[z] = objname;
		needCard_div_obj[objname].style.zIndex = z + needCardZoffSet;

		needCards[objname][hReady]		= 0;
		needCards[objname][hNeeds]		= needCards[objname][htop];
		needCards[objname][hApproach]	= needCards[objname][htop] + needCards[objname][hbot];

		logIt(z + ' ' + objname + ' declared as a needCard: ' + needCards[objname]);
		z++;
	}
}

function closeNeedCard (objname) {
	needCard_status[objname]								= 'animatingToReady';
	document.getElementById('black_overlay').style.visibility = 'hidden';
	resetNeedCard(objname);
}

function resetNeedCard (objname) {
	logIt('resetNeedCards ()');
	clearTimeout(needCard_timer[objname]);
	needCard_status[objname]									= 'resetting';
	needCard_div_obj[objname].style.left						= needCards[objname][mx] + 'px';
	needCard_div_obj[objname].style.top							= needCards[objname][my] + 'px';
	needCard_div_obj[objname].style.height						= needCards[objname][hReady] + 'px';
	needCard_div_obj[objname].style.visibility					= 'hidden';

	needCard_corner_top_div_obj[objname].style.height			= needCards[objname][htop] - 10 + 'px';
	needCard_corner_bottom_div_obj[objname].style.height		= 10 + 'px';

	needCard_gradient_bottom_div_obj[objname].style.bottom		= - needCards[objname][hApproach] + 'px';
	needCard_gradient_bottom_div_obj[objname].style.visibility	= 'hidden';

	needCard_solution_div_obj[objname].style.bottom				= - needCards[objname][hApproach]  + 'px';

	needCard_approach_div_obj[objname].style.visibility			= 'hidden';

	needCard_status[objname] 									= 'ready';
}

function interpolate (v1, v2, progress, start, end) {
	var value;
	if (progress < start) {
		value = v1;
	} else if (progress < end) {

//		Constant speed
//		value = v1 + (v2 - v1) * (progress - start) / (end - start);

//		Speed decelerating (starts fast and ends slow)
		value = v1 + (v2 - v1) * (1 - (Math.pow((end - progress),2) / Math.pow((end - start),2)));

	} else {
		value = v2;
	}
//	logIt(value);
	return value;
}



function popNeedCard (objname) {
	needCard_div_obj[objname] = document.getElementById('needCard_' + objname);
	
	var offset = 0;
	var z = 0;
	for (z = 0; z < needCard_zIndexes.length - 1; z++)	{
		if (needCard_zIndexes[z] == objname) {
			offset = 1;
		}
		needCard_zIndexes[z] = needCard_zIndexes[z + offset];
		needCard_div_obj[needCard_zIndexes[z]].style.zIndex = z + needCardZoffSet;
	}
	needCard_zIndexes[z] = objname;
	needCard_div_obj[objname].style.zIndex = z + needCardZoffSet;
}