Manage your online storages. Simply, Free and Better

<form name="form_${id}">
	<table border='0' cellpadding='0' cellspacing='0' width='90%'>
	<tr>
	<td class='portlet-link' colspan='3'>
	<br/>
	</td>
	</tr>	
	<tr>
	<td class='portlet-table-td-right'><label FOR='email' ACCESSKEY='U'>Email: </label></td>
	<td class='portlet-table-td-left'>
	<input type='text' id='email' name='email' value='${userId}' class='portlet-form-input-field' size='24' /> 
	</td>
	<td>
	</td>
	</tr>
	<tr>
	<td class='portlet-table-td-right'><label FOR='password' ACCESSKEY='P'>Password: </label></td>
	<td class='portlet-table-td-left'>
	<input type='password' id='password' name='password' value='' class='portlet-form-input-field' size='24' onkeypress="return Light.keyDownLogin(event,'${id}');"/> 
	</td>
	<td>
	</td>
	</tr>
	<tr>
	<td class='portlet-table-td-left'></td>
	<td class='portlet-table-td-left'>
	<input TYPE='checkbox' name='rememberMe' checked='checked' value='1'><label>Keep me logged in</label></input>
	</td>
	</tr>
	<tr>
	<td class='portlet-table-td-left'></td>
	<td class='portlet-table-td-left'>
	<input name='login' type='button' value='Login' class='portlet-form-button'
	  onclick="javascript:Light.loginPortal('${id}');" />
	<span  class='portlet-link-left'> 
		or <a href='javascript:;' onclick="javascript:Light.showSignUp('${id}');" ><b>Sign Up</b></a>
	</span>
	</td>
	</tr>
	<tr>
	<td class='portlet-table-td-left'></td>
	<td class='portlet-link-left' colspan='3'>
	<a href='javascript:;' onclick="javascript:Light.executeRender('${id}','edit','normal','type=forgot');" >Forgot Password?</a>
	</td>
	</tr>
			
	</table>
	</form>

{if success }
<div class='portlet-msg-success' >${success}</div>
{/if}
{if error }
<div class='portlet-msg-error' >${error}</div>
{/if}
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='portlet-table-td-left'>
<div class='portlet-title' style="margin:20px 0 0 0;"><b>Total Storage ${total}</b></div>
<div style="height: 22px; width:202px; margin:5px 0 20px 0; text-align: left;" class="bar-graph">
    <span id="usage-percent">${percent}% used (${used} of ${total})</span>
    <div style="width: 1px; height: 22px;" class="bar-graph-part bar-graph-normal"></div>
    <div style="width: ${percent * 2}px; height: 20px; margin-top:1px;" class="bar-graph-part bar-graph-shared"></div>    
    <br class="clear">
</div>
</td>
</tr>
{for account in accounts}
<tr>
<td class='portlet-table-td-left' colspan='2'>
<span class='portlet-item'>
<a href='javascript:;' onclick="javascript:Light.openStorageAccount(${account.type},'${account.userName}');">${account.name}: ${account.userName}</a>
</span>
{if account.authenticated != 1}
<span class='portlet-item'>
{if account.type == 5}
<a href='/openId/liveLogin.jsp' >Connect</a>	
{/if}
{if account.type == 4}
<a href='/openId/boxLogin.jsp' >Connect</a>	
{/if}
{if account.type == 3}
<a href='/openId/dropboxLogin.jsp' >Connect</a>	
{/if}
{if account.type == 2}
<a href='/openId/googleDocsLogin.jsp' >Connect</a>	
{/if}
{if account.type == 1}
<a href='/openId/googlePhotosLogin.jsp' >Connect</a>	
{/if}
</span>	
{/if}
</td>
</tr>
<tr>
<td class='portlet-table-td-left'>
<div style="height: 22px; width:202px; margin:5px 0 20px 0; text-align: left;" class="bar-graph">
    <span id="usage-percent">${account.percent}% used (${account.used} of ${account.total})</span>
    <div style="width: 1px; height: 22px;" class="bar-graph-part bar-graph-normal"></div>
    <div style="width: ${account.percent * 2}px; height: 20px; margin-top:1px;" class="bar-graph-part bar-graph-shared"></div>    
    <br class="clear">
</div>
</td>
</tr>
{/for}
<tr>
<td class='portlet-table-td-left'>
<span class='portlet-item' style="margin:0 0 10px 5px;">
<a href='javascript:;' onclick='javascript:Light.registerStorageAccount();' >Link a new account</a>	
</span>
</td>
</tr>
</table>

<div style="margin:20px 0 10px 0;">
<div class="portlet-title" style="width:300px; margin:10px auto; padding-left:0;" >
<b>Choose from the sites we support</b>
</div>
<div style="width:300px; margin:10px auto;" >
<select id="link_${id}" name='account' size='1' class='portlet-form-select' style="width:200px;"
 onchange="javascript:if(this.value){Light.openLinkStorageAccount(this.value);}">
 <option value=''></option> 


<option value='/openId/boxLogin.jsp'>Box.net</option> 

<option value='/openId/googleDocsLogin.jsp'>Google Docs</option>
<option value='/openId/googlePhotosLogin.jsp'>Google Photos(Picasa)</option>
<option value='/openId/liveLogin.jsp'>Microsoft SkyDrive</option>
</select>
<input type='button' name='action' onClick="javascript:if($('#link_${id}').val()){Light.openLinkStorageAccount($('#link_${id}').val());}" value='Link' class='portlet-form-button' />
</div>
<div style="width:500px; margin:30px auto 10px;" >
Do not see the site you use, please let us know and we will add it soon.
</div>
<div style="width:500px; margin:10px auto;" >
<input type='text' id='newSite' value='' class='portlet-form-input-field' size='66' /> 
<input type='button' name='action' onClick="javascript:Light.submitNewSite('newSite');" value='Submit' class='portlet-form-button' />
</div>
</div>

{if success }
<div class='portlet-msg-success' >${success}</div>
{/if}
{if error }
<div class='portlet-msg-error' >${error}</div>
{/if}

<form id='form_${id}' name='form_${id}' enctype='multipart/form-data' method='post' accept-charset='UTF-8' target="iframe_${id}"
	style="position: absolute; opacity: 0; top: -1000px; left: -1000px; display: block; z-index: 1000000; margin: -10px 0pt 0pt -170px;" 
  action ='/uploadStorageFile.lp' onsubmit="javascript:return AIM.submit(this, {'onStart' : startCallback, 'onComplete' : uploadCallback}, '${id}')">
  <table border='0' cellpadding='0' cellspacing='0' >
    <tr>
      <td class='portlet-table-td-left' >
        Upload File:
      </td>
    </tr>
    <tr>
      <td class='portlet-table-td-left' >
        <input type="file" id="upload_input_${id}" name="file" multiple="multiple"
         onChange="javascript:selectFiles('upload_input_${id}','${id}','/dropStorageFile.lp','','');">
      </td>
    </tr>
    <tr>
      <td class='portlet-table-td-right' >
        <input id='upload_submit_${id}' type='submit' value='Upload' class='portlet-form-button' />
        <input type='button' onClick="javascript:Light.executeRender('${id}','view','normal','');" value='Back' class='portlet-form-button' />        
      </td>
    </tr>
  </table>
</form>

<div id="upload_container_${id}" class="portlet-rss" style="margin:10px 0 20px 10px;">
Upload and Share is easy! just drop files below or <a href="javascript:;" onclick="javascript:Light.openStorageUpload('upload_input_${id}');">select</a> files from your local drive.
</div>
<div id="dropZone_${id}" class="portlet portlet-msg-success drop-zone-large"
ondrop="javascript:dropFile(event,'${id}','/dropStorageFile.lp','','');"
ondragenter="javascript:dragenter(event);"
ondragover="javascript:dragover(event);"
>

</div>
<div id="dropZone_tip_${id}" class="portlet-rss" style="padding-top:5px;">
<b>Hint</b>: You can drag & drop links to upload files on your desktop with Firefox and Google Chrome.
</div>
<div class="portlet-rss"  style="margin:10px;">
{if total > 1}
Default upload destination: 
{for setting in settings}
<div class="portlet-rss" style="margin:10px 0;">
<a href="javascript:;">${setting.account.source}: ${setting.account.userName}{if setting.defaultFolderPath != ''} (folder: ${setting.defaultFolderName}){/if}</a> for ${setting.defaultFileType}.
</div>
{/for}
</div>
<div class="portlet-rss" style="margin:10px;">
Change your <a href="javascript:Light.openStorageSetting();">default settings</a>.
</div>
{/if}
{if total == 1}
<div class="portlet-rss">
Default upload destination is <a href="javascript:;">${settings[0].account.source}: ${settings[0].account.userName}{if settings[0].defaultFolderPath != ''} (folder: {settings[0].defaultFolderName}){/if}</a>. Change your <a href="javascript:Light.openStorageSetting();">default settings</a>.
</div>
{/if}
{if total == 0}
<div class="portlet-rss">
Default upload destination is <a href="javascript:;">${account.source}: ${account.userName}</a>. Change your <a href="javascript:Light.openStorageSetting();">default settings</a>.
</div>
{/if}

<form name="form_${id}" action="javascript:;" style='margin:20px 0;'>
{if success }
<div class='portlet-msg-success' >${success}</div>
{/if}
{if error }
<div class='portlet-msg-error' >${error}</div>
{/if}
	<table border='0' cellpadding='0' cellspacing='0' width='90%'>
	<tr>
	<td class='portlet-link-left' colspan='2'>
	<span  class='portlet-link-left'> 
		<a href="javascript:;" onclick="window.open('/openId/boxLogin.jsp','mywindow','width=800,height=480');"><b>Connect</b></a> with Box.net account		
	</span>
	</td>
	</tr>		
 	{if accountCount > 0}
	<tr>
	<td class='portlet-table-td-left' colspan='2'>
	or 
	</td>
	</tr>
	<tr>
	<td class='portlet-table-td-left'>
	Pick an Account:
	</td>
	<td class='portlet-table-td-left'>
	<select name='accountUserName' size='1' class='portlet-form-select' STYLE="width:200px;font-size:120%;">
	{for account in accounts}
	<option value='${account.userName}' 
	{if account.userName == accountUserName } selected='selected' {/if}
	>
	${account.userName}</option>
	{/for}
	</select>
	</td>
	</tr>	
	<tr>
	<td class='portlet-table-td-left'></td>
	<td class='portlet-table-td-left'>
	<input type='button' onClick="javascript:document.resetLastAction='1';Light.executeAction('${id}',this.form,'config',null,null,'VIEW','normal');" value='Select' class='portlet-form-button' />
	</td>
	</tr>
	{/if}
	</table>
</form>

<form name="form_${id}" action="javascript:;" style='margin:20px 0;'>
{if success }
<div class='portlet-msg-success' >${success}</div>
{/if}
{if error }
<div class='portlet-msg-error' >${error}</div>
{/if}
	<table border='0' cellpadding='0' cellspacing='0' width='90%'>
	<tr>
	<td class='portlet-link-left' colspan='2'>
	<span  class='portlet-link-left'> 
		<a href="javascript:;" onclick="window.open('/openId/dropboxLogin.jsp','mywindow','width=800,height=480');"><b>Connect</b></a> with Dropbox account		
	</span>
	</td>
	</tr>		
 	{if accountCount > 0}
	<tr>
	<td class='portlet-table-td-left' colspan='2'>
	or 
	</td>
	</tr>
	<tr>
	<td class='portlet-table-td-left'>
	Pick an Account:
	</td>
	<td class='portlet-table-td-left'>
	<select name='accountUserName' size='1' class='portlet-form-select' STYLE="width:200px;font-size:120%;">
	{for account in accounts}
	<option value='${account.userName}' 
	{if account.userName == accountUserName } selected='selected' {/if}
	>
	${account.userName}</option>
	{/for}
	</select>
	</td>
	</tr>	
	<tr>
	<td class='portlet-table-td-left'></td>
	<td class='portlet-table-td-left'>
	<input type='button' onClick="javascript:document.resetLastAction='1';Light.executeAction('${id}',this.form,'config',null,null,'VIEW','normal');" value='Select' class='portlet-form-button' />
	</td>
	</tr>
	{/if}
	</table>
</form>

<form name='form_${id}' action="javascript:;" style='margin:5px 0;'>
<div id='dropZone_${id}' style="height:90%;"
	onmouseup="javascript:transferEnd(event,'${id}','${accountId}','${folderId}');">
{if success }
<div class='portlet-msg-success' >${success}</div>
{/if}
{if error }
<div class='portlet-msg-error' >${error}</div>
{/if}

<div class="portlet-item">
{if folderId > 0}
{for bean in folderBeans}
{if bean.id != folderId}
<span class="portlet-item"><a href='javascript:;' onclick="javascript:Light.executeRender('${id}','','','folderId=${bean.id}','');" >${bean.desc}</a></span>
->
{/if}
{if bean.id == folderId}
${bean.desc}
{/if}
{/for}
<span class="portlet-item" style="display:block;padding:5px 0 2px 0;"><a href='javascript:;' onclick="javascript:Light.executeRender('${id}','','','folderId=${folder.parentId}','');" ><img src='/light/images/arrow_turn_up.png' style='border: 0px;padding-right:3px;' height='16' width='16' align="bottom"/>Parent Folder</a></span>
{/if}
</div>
<div id='container_${id}' style="height:{if maximized}600px;{else}200px;{/if}overflow:auto;">
<div id='folders_${id}' style="padding:5px 0 0 0;">
{for item in folders}
<div class="portlet-item" style="padding:2px 0 3px 0;"
	onmouseover="javascript:this.className='portlet-item theme-bgcolor'";
	onmouseout="javascript:this.className='portlet-item';"
	>
<input type='checkbox' name='itemId' value='${item.id}' />
<img src="/light/images/folder_smll.gif" style='border: 0px;' height='16' width='16' />
<span class="portlet-item">
<a id='${id}_${item.id}' href='javascript:;' 
   		onclick="javascript:Light.executeRender('${id}','','','folderId=${item.id}');"
		>
	    ${item.name}
</a>
</span>	
</div>
{/for}
</div>
{for item in files}
<div id="file_${item.id}" class="portlet-item draggable" style="padding:2px 0 3px 0;"
	onmouseover="javascript:this.className='portlet-item theme-bgcolor'";
	onmouseout="javascript:this.className='portlet-item';"
	onmousedown = "javascript:transferStart(event,'file_${item.id}','${id}','${item.id}','${item.name}','file');"	
	
	>
<input type='checkbox' name='itemId' value='${item.id}' />
<span class="portlet-item">
{if item.httpUrl == 1}
<a id='${id}_${item.id}' href='${item.url}' target='_blank'>
	${item.name}
</a>
{/if}
{if item.httpUrl == 0}
<a id='${id}_${item.id}' href='/storage/${item.id}' target='_blank'>
	${item.name}
</a>
{/if}
</span>	
{if windowStatus == 'max'}
<span class="portlet-note">${item.date}</span>
{/if}
</div>
{/for}
</div>
</div>
</form>

<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr valign='top'>
<td class='portlet-table-td-left' width='18%'>
<div style="padding:40px 0 3px 10px;">
	{if facets1 }	
		{if facet1 }
			<span class='item_title' style='padding: 5px;display:block;'>
			<a href='javascript:;' onclick="javascript:Light.executeRender('${id}','','','keyword='+L$('keyword_${id}').value);">
				<b> < ${facet1} </b><span class="portlet-note">(${total})</span>
			</a>
			</span>
		{else}
			<span class='portlet-link-left' style='padding: 5px;display:block;'>
			<a href='javascript:;' onclick="javascript:Light.executeRender('${id}','','','keyword='+L$('keyword_${id}').value);">
				<b>Browse by Site </b>
			</a>
			</span>
			
			{for facetBean1 in facets1}
			<span class='item_title' style='padding: 5px;display:block;'>
			<a href='javascript:;' onclick="javascript:Light.executeRender('${id}','','','facet1=${facetBean1.id};keyword='+L$('keyword_${id}').value);" >
				${facetBean1.desc}
			</a>
			</span>
			{/for}
		{/if}
	{/if}
</div>
</td>
<td class='portlet-table-td-left'>
<form name='form_${id}' action="javascript:;" style='margin:5px 0;'>
<div class="portlet-item" style="padding:2px 0 3px 10px;">
<input type='text' id='keyword_${id}' value='${keyword}' class='portlet-form-input-field' style="width:640px;height:25px;" 
	maxlength="2048" autocomplete="off" 
	/>
<input type="image" id='button_${id}' src="/light/images/search_button.gif" align='top' height='25' width='88' onClick="javascript:Light.executeRender('${id}','','','keyword='+L$('keyword_${id}').value,'');"/>
</div>
<div class="portlet-item">
{if folderId > 0}
{for bean in folderBeans}
{if bean.id != folderId}
<span class="portlet-item"><a href='javascript:;' onclick="javascript:Light.executeRender('${id}','','','folderId=${bean.id}','');" >${bean.desc}</a></span>
->
{/if}
{if bean.id == folderId}
${bean.desc}
{/if}
{/for}
<span class="portlet-item" style="display:block;padding:5px 0 2px 0;"><a href='javascript:;' onclick="javascript:Light.executeRender('${id}','','','folderId=${folder.parentId}','');" ><img src='/light/images/arrow_turn_up.png' style='border: 0px;padding-right:3px;' height='16' width='16' align="bottom"/>Parent Folder</a></span>
{/if}
</div>
{if keyword && total==0}
<div class="portlet-item" style="padding:5px 0 0 20px;">
No matched results.
</div>
{/if}
<div id='container_${id}' style="height:480px;overflow:auto;">
<div id='folders_${id}' style="padding:5px 0 0 0;">
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
{for item in folders}
<tr>
<td class='portlet-table-td-left' width="640px">
<div class="portlet-item" style="padding:2px 0 3px 10px;"
	onmouseover="javascript:this.className='portlet-item theme-bgcolor'";
	onmouseout="javascript:this.className='portlet-item';"
	>
<img src="/light/images/folder_smll.gif" style='border: 0px;' height='16' width='16' />
<span class="portlet-item">
<a id='${id}_${item.id}' href='javascript:;' 
   		onclick="javascript:Light.executeRender('${id}','','','folderId=${item.id}');"
		>
	    ${item.name}{if item.source} (${item.source}--${item.account}){/if}
</a>
</span>	
</div>
</td>
<td class='portlet-table-td-left'>
<span class="portlet-note">${item.date}</span>
</tr>
{/for}
</div>
{for item in files}
<tr>
<td class='portlet-table-td-left' width="640px">
<div id="file_${item.id}" class="portlet-item draggable" style="padding:2px 0 3px 10px;"
	onmouseover="javascript:this.className='portlet-item theme-bgcolor'";
	onmouseout="javascript:this.className='portlet-item';"
	
	>
<span class="portlet-item">
{if item.httpUrl == 1}
<a id='${id}_${item.id}' href='${item.url}' target='_blank'>
	${item.name} {if item.source} (${item.source}--${item.account}){/if}
</a>
{/if}
{if item.httpUrl == 0}
<a id='${id}_${item.id}' href='/storage/${item.id}' target='_blank'>
	${item.name} {if item.source} (${item.source}--${item.account}){/if}
</a>
{/if}
</span>	
</div>
</td>
<td class='portlet-table-td-left'>
<span class="portlet-note">${item.date}</span>
</tr>
{/for}
</table>
</div>
<div class="portlet-rss" style="clear:both;text-align:right;padding:0 25px 0 0;">
	{if pages > 1 }			 	
	 	    <label>(Results ${start + 1 } -  ${end} of ${total})</label>
			{if page > 1 }
				<a href="javascript:;" onclick="javascript:Light.executeRender('${id}','','','page=${page - 1};keyword='+L$('keyword_${id}').value);"><img src='/light/images/previous.gif' width='16px' height='16px' title='previous' alt='' /></a>						
			{/if}
			{for number in pageNumbers}
				{if number != page}
					<a href='javascript:;' onclick="javascript:Light.executeRender('${id}','','','page=${number};keyword='+L$('keyword_${id}').value);" >${number}</a>
				{/if}
				{if number == page}
					<label class='currentpage'>${number}</label>
				{/if}
			{/for}
			{if page < pages}
				<a href="javascript:;" onclick="javascript:Light.executeRender('${id}','','','page=${page + 1};keyword='+L$('keyword_${id}').value);"><img src='/light/images/next.gif' width='16px' height='16px' title='next' alt='' /></a>						
			{/if}				
	{elseif total > 0}
		<label>Total ${total}
		{if total == 1 }
	  		result		
		{else}
			results	
		{/if}.	
		</label>		
	{/if}
</div>

</div>
</form>
</td>
</tr>
</table>