@(fileName:String="Query file", fileId:Option[models.UUID], queryThumbnailId:Option[String], resultsList:List[(VersusIndex,  List[PreviewFilesSearchResult])])(implicit user: Option[models.User])

@**********************************************************************@
@****   Template to display search results for each index           ***@
@****    User can enter weights to combine search results into one  ***@
@**********************************************************************@

@import helper._
@import collection.JavaConverters._

@import models.VersusIndex
@import models.PreviewFilesSearchResult
@import models.SearchResultFile
@import models.SearchResultPreview

@implicitFieldConstructor = @{ FieldConstructor(twitterBootstrapInput.f) }

@main("Search Results") {	

	@***********  Display search results for each index  ******************@

	<div class="page-header">
		<h1>Search Results For <medium>@fileName</medium></h1>
		   		  
	     @if(!queryThumbnailId.isEmpty){ 
	       <img class='mmd-img media-object' 
            src='@(routes.Files.thumbnail(UUID(queryThumbnailId.get)))'
            title='Thumbnail of query file'>
          </img>
       }
  
    <h4> All distances are normalized to be between 0.0 and 1.0</h4>		
	</div>
  
  @if(resultsList.size == 0){
	<div class="row">
		<div class="col-md-12">
			No results found
		</div>
	</div>
	} else {	
			
	<table>

	@** Fix to align results at the top - otherwise <tbody> tag would be automatically inserted and valign set to "middle"**@
	<tbody valign="top">	
	<tr>  
	@for((index, previewsAndFiles) <- resultsList) {
	  @** only display results for non-empty indexes **@
	  @if(previewsAndFiles.length > 0){
		<td>
		<h3>Index name</h3>
		Extractor:@index.extractorID<br>Measure:@index.measureID<br>Indexer:@index.indexerType<p><p>
		<table >		
		@for(oneResult <- previewsAndFiles) {			
			<tr >			
				<td style="vertical-align:middle; height:150px;">			
					<div class="media">
					  
						@****** result is File ******@
						@if(oneResult.fileOrPreview.equalsIgnoreCase("file")){
						
							<a class="pull-left" href=@oneResult.searchResultFile.url>							
							@if(!oneResult.searchResultFile.thumbnailId.isEmpty){
								<img class='mmd-img media-object' 
									src='@(routes.Files.thumbnail(UUID(oneResult.searchResultFile.thumbnailId)))'
									alt='Thumbnail of @(oneResult.searchResultFile.title)' 
									title='Distance @oneResult.searchResultFile.distance'>
								</img>
								
							}	else {No thumbnail available}						
							<br>
							
							</a>
					  <div class="media-body">
					    <h4 class="media-heading">@oneResult.searchResultFile.title</h4>
					    <p>Distance: @oneResult.searchResultFile.distance</p>			    

						
					    @if(oneResult.searchResultFile.datasetIdList.size==0){
					    	No dataset associated with this image 
					    }
					  @if(oneResult.searchResultFile.datasetIdList.size>0){
					  	<b>Belongs to  @oneResult.searchResultFile.datasetIdList.size dataset(s)</b>
					  	@oneResult.searchResultFile.datasetIdList.map{id=>					   
					     		<br><a href=@routes.Datasets.dataset(UUID(id))> View Dataset </a>
					    	}  						  	 
					    }	 
					    
					    <br>					    	
					    	<a href=@routes.Search.findSimilarToExistingFile(oneResult.searchResultFile.id)>Find Similar</a>					 
					     	<br>
					     	<a href="@(routes.Files.file(oneResult.searchResultFile.id))">View File </a>
					     	
						}	@*end of is File*@		
						
    
   					 @*** result is Preview ***@
						@if(oneResult.fileOrPreview.equalsIgnoreCase("preview")){					
						<a class="pull-left" href=@oneResult.searchResultPreview.url>	
						<img class='mmd-img media-object' 
							src='@api.routes.Previews.download(oneResult.searchResultPreview.id)' 
							alt='@oneResult.searchResultPreview.previewName' 
							title='Distance @oneResult.searchResultPreview.distance'>
						</img>
						
						</a>
					  <div class="media-body">

					    <h4 class="media-heading">@oneResult.searchResultPreview.previewName</h4>
					    <p>Distance (normalized): @oneResult.searchResultPreview.distance</p>				    
						
					    @*** displaying datasets ***@
					    @if(oneResult.searchResultPreview.datasetIdList.size==0){
					    	No dataset associated with this image 
					    }

					  @if(oneResult.searchResultPreview.datasetIdList.size>0){
					  		<b>Belongs to  @oneResult.searchResultPreview.datasetIdList.size dataset(s)</b>
					  		@oneResult.searchResultPreview.datasetIdList.map{id=>					   
					     			<br><a href=@routes.Datasets.dataset(UUID(id))> View Dataset </a>
					     			<br>					     		
					    	}  						  	 
					    }					    
					     @*** END OF: displaying datasets ***@
					    <a href="@(routes.Files.file(UUID(oneResult.searchResultPreview.fileIdString)))">
					     		View File @oneResult.searchResultPreview.fileTitle</a>
					     <br>
					     		Shot start time: @oneResult.searchResultPreview.shotStartTime					     		
						}@* end of If Preview *@

					  </div>
					</div>
				</td>
			</tr>
		}  @** END OF for(oneResult <- previewsAndFiles)  **@
		</tbody>	

		</table>
		</td>		
		} @** END OF if(previewsAndFiles.length > 0) **@
	} @** end of for (...<- resultsList) **@
	</tr>

	</tbody></table>
	@***********  End of search results for each index  ******************@
	
	<br>
	    @************ form to combine search results - if two or more indexes ************@
      @**** only offer to combine search results if fileId is defined, i.e. requests came from 
            findSimilarToExistingFile or findSimilarToQueryFile.
            If request came from searchByURL - do NOT display the form ****@
      
	@if(resultsList.size >=2 && fileId.isDefined) {
		 @form(action = routes.Search.findSimilarWeightedIndexes, 'id->"form-weights", 'enctype -> "multipart/form-data", 'class -> "form-horizontal") {
		       
		      <div id="validation"></div> 
		       
			    <fieldset>
			      <legend>Combine search results</legend>			     
		  	      <input type="hidden" name="FileID" value="@fileId" id="file_hidden">			    	 		    
			     	  @for((index, previewsAndFiles) <- resultsList) {
			     	   @**** only offer to combine result for non-empty indexes, i.e. results size >0 ***@
			     	   @if(previewsAndFiles.size > 0){	
			     		    <p>Please select weight for index @index.extractorID / @index.measureID  			
			     		    <input type="text" name="Weight" id="@index.id">			
						      <input type="hidden" name="IndexID" value="@index.id">
						   }												
					   }			     
					   <div id="checkboxes" style="padding-left:15px">
			    </fieldset>
		      <div class="form-actions">
				  <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-filter"></span> Combine Results</button>
		      </div>
		}
	}<!--end of if(resultsList.size >=2) -->
@************ end of form ************@

<script language="javascript">
		//============================================================================
		//validate input on submit
		//============================================================================
		document.getElementById('form-weights').onsubmit =function(){
			//alert('top of validation');
			
			var errors = "";
			
			//reset errors display
			document.getElementById("validation").innerHTML = "";
	        
			console.log("hidden file = " + document.getElementById('file_hidden'));
			
			var w;
			var sum = 0.0;
			var floatVal=0.0;			
			@for((index, previewsAndFiles) <- resultsList) {
				//get weight for index
				w = document.getElementById("@index.id");
				w.style.backgroundColor = "#FFFFFF";
				//make sure weight is a number
				floatVal = parseFloat( w.value);
				
				if (isNaN(floatVal)){	
				 //not a number
				 w.style.backgroundColor = "#FFCCCC";				 
				 w.setSelectionRange(0, w.value.length);				 
				 errors += "<li>Weights must be numbers</li>";
				}
				else if (floatVal <0 || floatVal >1){
				 //not within 0..1
				 w.style.backgroundColor = "#FFCCCC";				 
				 w.setSelectionRange(0, w.value.length);				 
				 errors += "<li>Weights must be between 0 and 1</li>";
				}				
				sum += floatVal;
				
			}//end of for((index, previewsAndFiles) <- resultsList) 
			if (sum != 1.0) {
				 errors += "<li>Sum of weights must be 1 </li>";
			}
				
			if (errors.length > 0) {
		        document.getElementById("validation").innerHTML = "Please correct the following errors:<ul>" + errors + "</ul>";
		        document.getElementById("validation").style.backgroundColor = "#FFCCCC";
		        return false;
		    } else {
		    	//alert("input OK");
		    	return true;
		    }
			//return false;
		}
			
</script>

	}		
}