<html>

<head>

	<title>Import from DropBox</title>

	<style>

		body{

			background-color: '#ededed';

		}

		#cplAppTitleBar{

			height: 40px;

			position: fixed;

			top: 0px;

			left: 0px;

			right: 0px;



			background-color: #F6F6F6;

			border-bottom: 1px solid #b5b5b5;

		}

		#cplAppLogo{

			position: absolute;

			left: 10px;

			top: 7px;



			width: 25px;

			height: 25px;

		}

		#cplAppTitle{

			position: absolute;

			left: 55px;

			top: 7px;

			line-height: 25px;

			margin: 0px;

			border: 0px;

			color: #444444;

			font-size: 18px;

			font-family: "HelveticaNeue-Thin";

		}

		#projectContainer{

			left: 0px;

			top: 50px;

			right: 0px;

			bottom: 10px;

			position: fixed;

			display: block;

			overflow-y: scroll;

			overflow-x: hidden;

			padding: 10px;

			box-sizing: border-box;

		}

		#controls{

			width: 100%;

			height: 50px;

			left: 0px;

			top: 0px;

			position: fixed;

			display: none;

			background-color: #3399ff;

		}

		#downloadBtn{

			width: 100px;

			height: 30px;

			right: 0px;

			bottom: 0px;

			margin: 10px;

			position: absolute;

			display: block;

			border: 1px solid white;

			background-color: #0066ff;

			color: #ffffff;

		}

		.projThumbContainer{

			width: 170px;

			height: 150px;

			margin: 10px;

			display: inline-block;

		}

		.projThumbName{

			left: 0px;

			top: 120px;

			width: 150px;

			height: 30px;

			margin: 10px;

			text-align: center;

			color: #4d4d4d;

			font-family: 'HelveticaNeue-Light';

			font-size: 13px;

			overflow: hidden;

			word-wrap: break-word;

			line-height: 1.0;

		}

		.projThumb{

			left: 0px;

			top: 0px;

			width: 150px;

			height: 120px;

			margin: 10px;

			background-color: #2f2f2f;

			border: 1px solid #CCCCCC;

			background-size: 100% 100%;

		}

		.active{

			border: 1px solid #006837;	

		}

		#cplProgressMsg{

			position: absolute;

			left: 10px;

			right: 10px;

			text-align: center;			

			top: 80px;

			border: 0px;

			color: #444444;

			font-size: 24px;

			font-family: "HelveticaNeue-Thin";

		}	

	</style>

	<script type="text/javascript">

		var multipleDownloads = false;

		var projects = [];

		var selectedProjects = [];

		var THUMB_PREFIX = 'thumb_';

		var progressMsg = 'Downloading. Please wait...';

		function getParameterByName(parameterName) 

		{

			parameterName = parameterName.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");

			var regex = new RegExp("[\\?&]" + parameterName + "=([^&#]*)");

			var location = window.location.search;

			var searchResult = regex.exec(location);

			return searchResult == null ? "" : decodeURIComponent(searchResult[1].replace(/\+/g, " "));

		}



		function noteDownProjects(e)

		{

			if(e.preventDefault)

				e.preventDefault();

			if(e.stopPropagation)

				e.stopPropagation();



			var elem = e.target;

			if(!elem)

				return;

			var elemId = elem.id.split(THUMB_PREFIX)[1];

			var proj = projects[elemId];

			if(proj)

			{

				proj.chosen = true;

				elem.classList.add('active');

			}

		}



		function openProject(e)

		{

			if(e.preventDefault)

				e.preventDefault();

			if(e.stopPropagation)

				e.stopPropagation();



			var elem = e.target;

			if(!elem)

				return;

			var elemId = elem.id.split(THUMB_PREFIX)[1];

			var proj = projects[elemId];

			if(proj)

			{

				proj.chosen = true;

				elem.classList.add('active');

				window.location.href = window.location.href.split(window.location.search)[0] + "?progressMsg=" + progressMsg + "&download=" + elemId;

			}

		}



		function deselectProjects(e)

		{

			for(var key in projects)

			{	

				projects[key].chosen = false;	

				var projElem = document.getElementById(THUMB_PREFIX + key);

				projElem.classList.remove('active');

			}

		}



		function download(e)

		{

			for(var key in projects)

			{

				if(projects[key].chosen)

					selectedProjects.push(key);

			}



			window.location.href = window.location.href.split(window.location.search)[0] + "?progressMsg=" + progressMsg + "&download=" + selectedProjects.toString();

		}



		function loadProjectThumbs(e)

		{

			if(getParameterByName('gettingFileList') != "" || getParameterByName('download') != "")

			{

				progressMsg = getParameterByName('progressMsg');

				document.getElementById('projectContainer').style.display = 'none';

				document.getElementById('cplProgressMsg').innerHTML = progressMsg;

				return;

			}

			var projectListDiv = document.getElementById('projectContainer');

			progressMsg = getParameterByName('progressMsg');

			if(multipleDownloads)

			{

				var downloadBtnDiv = document.getElementById('downloadBtn');

				projectListDiv.addEventListener('click',deselectProjects,false);

				downloadBtnDiv.addEventListener('click',download,false);

			}

			else

			{

				var controlsDiv = document.getElementById('controls');

				controlsDiv.style.display = 'none';

			}



			var projectList = getParameterByName('prjs').split(',');

			for(var i = 0; i < projectList.length; ++i)

			{

				var projName = projectList[i];

				var thumbContainer = document.createElement('div');

				thumbContainer.className = 'projThumbContainer';



				var thumb = document.createElement('div');

				thumb.id = THUMB_PREFIX + projName;

				thumb.className = 'projThumb';

				thumb.style.backgroundImage = 'url(\'thumbs/' + projName + '.jpg\')';

				thumbContainer.appendChild(thumb);



				var thumbName = document.createElement('div');

				thumbName.className = 'projThumbName';

				thumbName.innerHTML = projName;

				thumbContainer.appendChild(thumbName);



				projectListDiv.appendChild(thumbContainer);



				if(multipleDownloads)

					thumb.addEventListener('click',noteDownProjects,false);

				else

					thumb.addEventListener('click',openProject,false);



				projects[projName] = {'chosen':false};

			}

		}

	</script>

</head>

<body onload='loadProjectThumbs(event)'>

<div id='cplAppTitleBar'>

	<img id='cplAppLogo' src='applogo.svg'/>

	<p id='cplAppTitle'> From Adobe Captivate Lite </p>

</div>

<div id='projectContainer'></div>

<div id='cplProgressMsg'></div>



<div id='controls'>

	<div id='downloadBtn'></div>

</div>



</body>

</html>