/**
 * User interface. Contains routines to decorate
 * the html with contents from search results.
 *
 * Depends on:
 *      - common.js
 *      - config.js
 *      - prototype
 */

var ui = {
    renderSearchResults: function ( documents, c ) {
        var results = [];
        documents.each(function(document) {
            var doc = MM.util.extractDocumentFields(document);
            
            //Print result details above
            var resultHeader = "<ul class='resultHeader'>";
            if(typeof doc.keyword !== 'undefined' && doc.keyword !== null && new String(doc.keyword).replace(" ","") !== ""){
            	resultHeader += "<li class='keyword'><em>Kategori:</em> " + doc.keyword + "</li>";
            }
            if(typeof doc.section !== 'undefined' && doc.section !== null && new String(doc.section).replace(" ","") !== ""){
            	resultHeader += "<li class='section'><em>Avdelning:</em> " + doc.section + "</li>";
            }
            resultHeader += (doc.publishdate !== undefined ? "<li class='publ'><em>Publicerat:</em> " + doc.publishdate + ((doc.author !== undefined) ? "<span class='author'>, av " + doc.author : "") + "</span></li>" : "");
            resultHeader += "<li class='paper " + doc.paper + "'><em>Tidning:</em> " + Translation.translateToPaperName(doc.paper) + "</li>";
            resultHeader += "<li class='type'><em>Typ:</em> " + Translation.translateToTemplateName(doc.type) + "</li>";
            if(typeof doc.grade !=='undefined' && doc.grade !== null && new String(doc.grade).replace(" ","") !== ""){
            	resultHeader += "<li class='grade grade" + doc.grade + "'><em>Betyg:</em> " + doc.grade + "</li>";
            }
            if(typeof doc.geography !== 'undefined' && doc.geography !== null && new String(doc.geography).replace(" ","") !== ""){
            	resultHeader += "<li class='geografy'><em>Plats:</em> " + doc.geography + "</li>";
            }
            resultHeader += "</ul>";
            
            //Print main search result details
            var resultTitle = "<div class='resultTitle'>" + MM.util.toHref(doc.url, doc.name);
            if(typeof doc.thumbnail !== 'undefined' && doc.thumbnail !== null){
				doc.thumbnail += "?maxWidth=" + MM.cfg.maxThumbnailImageWidth;
            	resultTitle += "<a href='" + doc.url + "' title='" + MM.util.removeHTMLTags(doc.name) + "'><img class='thumbnail' src='" + doc.thumbnail + "' alt='" + MM.util.removeHTMLTags(doc.name) + "'/></a>";
            }
            resultTitle += "</div>";
            var resultContent = (doc.display !== undefined ? "<span class='resultContent'>" + doc.display + "</span>" : "");
            //var resultContext = (doc.context !== undefined ? "<span class='resultContext'><em>Tillh&ouml;r inneh&aring;ll:</em> " + MM.util.toHref(doc.context, 'Visa i sammanhang') + "</span>": "");
            
			//Print images
			var resultImages = "";
			if(typeof doc.images !== 'undefined' && doc.images !== null){
				resultImages += "<div class='resultImages'>";
				resultImages += "<a class='resultImagesLink' href='#' title='Relaterade bilder'>Visa relaterade bilder:</a>";
				resultImages += "<ul>";
				doc.images.each(function(image, index){
					if ((index + 1) <= MM.cfg.maxImages) {
						image += "?maxWidth=" + MM.cfg.maxImageWidth;
						resultImages += "<li><a href='" + doc.url + "' title='" + MM.util.removeHTMLTags(doc.name) + "'><img class='resultImage' src='" + image + "' alt='" + image + "'/></a></li>";
					}	
				});
				resultImages += "</ul>";
				resultImages += "</div>";
			}
			
            //Print result details below
            var resultFooter = "<ul class='resultFooter'>";
            if(typeof doc.keyword !== 'undefined' && doc.keyword !== null && doc.keyword.length > 0){
            	resultFooter += "<li class='keyword'><em>Kategori:</em> " + doc.keyword + "</li>";
            }
            if(typeof doc.section !== 'undefined' && doc.section !== null && new String(doc.section).replace(" ","") !== ""){
            	resultFooter += "<li class='section'><em>Avdelning:</em> " + doc.section + "</li>";
            }
            resultFooter += (doc.publishdate !== undefined ? "<li class='publ'><em>Publicerat:</em> " + doc.publishdate + ((doc.author !== undefined) ? "<span class='author'>, av " + doc.author : "") + "</span></li>" : "");
            resultFooter += "<li class='paper " + doc.paper + "'><em>Tidning:</em> " + Translation.translateToPaperName(doc.paper) + "</li>";
            resultFooter += "<li class='type'><em>Typ:</em> " + Translation.translateToTemplateName(doc.type) + "</li>";
            if(typeof doc.grade !=='undefined' && doc.grade !== null && new String(doc.grade).replace(" ","") !== ""){
            	resultFooter += "<li class='grade grade" + doc.grade + "'><em>Betyg:</em> " + doc.grade + "</li>";
            }
            if(typeof doc.geography !== 'undefined' && doc.geography !== null && new String(doc.geography).replace(" ","") !== ""){
            	resultFooter += "<li class='geografy'><em>Plats:</em> " + doc.geography + "</li>";
            }
            resultFooter += "</ul>";
            results.push("<div class='resultEntry " + (typeof doc.type !== 'undefined' ? Translation.translateToTemplateName(doc.type).toLowerCase() : "") + " " + doc.paper + "'>" +resultHeader + resultTitle + resultContent + resultImages + resultFooter + "</div>");
        });

        var wrapper = c.select("#searchResults")[0];
        if(!wrapper){
        	wrapper = c.down('div.content');
        }
        wrapper.update( results.join("") );
    },

    renderRelatedResults: function ( documents ,c) {
        var related = [];
        if(documents.length > 0){
        	related.push("<h2 class='relatedHeadline'>Relaterade tr&auml;ffar</h2>");
        }
        documents.each(function(document) {
            var doc = MM.util.extractDocumentFields(document);
            if(MM.cfg.showRelatedResultAsTeasers){
	            //Print result details above
	            var resultHeader = "<ul class='resultHeader'>";
	            if(typeof doc.keyword !== 'undefined' && doc.keyword !== null && new String(doc.keyword).replace(" ","") !== ""){
	            	resultHeader += "<li class='keyword'><em>Kategori:</em> " + doc.keyword + "</li>";
	            }
	            if(typeof doc.section !== 'undefined' && doc.section !== null && new String(doc.section).replace(" ","") !== ""){
	            	resultHeader += "<li class='section'><em>Avdelning:</em> " + doc.section + "</li>";
	            }
	            resultHeader += (doc.publishdate !== undefined ? "<li class='publ'><em>Publicerat:</em> " + doc.publishdate + ((doc.author !== undefined) ? "<span class='author'>, av " + doc.author : "") + "</span></li>" : "");
	            resultHeader += "<li class='paper " + doc.paper + "'><em>Tidning:</em> " + Translation.translateToPaperName(doc.paper) + "</li>";
	            resultHeader += "<li class='type'><em>Typ:</em> " + Translation.translateToTemplateName(doc.type) + "</li>";
	            if(typeof doc.grade !=='undefined' && doc.grade !== null && new String(doc.grade).replace(" ","") !== ""){
	            	resultHeader += "<li class='grade grade" + doc.grade + "'><em>Betyg:</em> " + doc.grade + "</li>";
	            }
	            if(typeof doc.geography !== 'undefined' && doc.geography !== null && new String(doc.geography).replace(" ","") !== ""){
	            	resultHeader += "<li class='geografy'><em>Plats:</em> " + doc.geography + "</li>";
	            }
	            resultHeader += "</ul>";
	            
	            //Print main search result details
	            var resultTitle = "<div class='relatedTitle'>" + MM.util.toHref(doc.url, doc.name);
	            if(typeof doc.thumbnail !== 'undefined' && doc.thumbnail !== null){
					doc.thumbnail += "?maxWidth=" + MM.cfg.maxThumbnailImageWidth;
	            	resultTitle += "<a href='" + doc.url + "' title='" + doc.name + "'><img class='thumbnail' src='" + doc.thumbnail + "' alt='" + doc.name + "'/></a>";
	            }
	            resultTitle += "</div>";
				
				//Print images
				var resultImages = "";
				if(typeof doc.images !== 'undefined' && doc.images !== null){
					resultImages += "<div class='relatedImages'>";
					resultImages += "<a class='relatedImagesLink' href='#' title='Relaterade bilder'>Visa relaterade bilder:</a>";
					resultImages += "<ul>";
					doc.images.each(function(image, index){
						if((index + 1) <= MM.cfg.maxImages){
							resultImages += "<li><a href='" + doc.url + "' title='" + doc.name + "'><img class='relatedImage' src='" + image + "' alt='" + image + "'/></a></li>";	
						}
					});
					resultImages += "</ul>";
					resultImages += "</div>"
				}
				
	            var resultContent = (doc.display !== undefined ? "<span class='resultContent'>" + doc.display + "</span>" : "");
	            //var resultContext = (doc.context !== undefined ? "<span class='resultContext'><em>Tillh&ouml;r inneh&aring;ll:</em> " + MM.util.toHref(doc.context, 'Visa i sammanhang') + "</span>": "");
	            
	            //Print result details below
	            var resultFooter = "<ul class='resultFooter'>";
	            if(typeof doc.keyword !== 'undefined' && doc.keyword !== null && doc.keyword.length > 0){
	            	resultFooter += "<li class='keyword'><em>Kategori:</em> " + doc.keyword + "</li>";
	            }
	            if(typeof doc.section !== 'undefined' && doc.section !== null && new String(doc.section).replace(" ","") !== ""){
	            	resultFooter += "<li class='section'><em>Avdelning:</em> " + doc.section + "</li>";
	            }
	            resultFooter += (doc.publishdate !== undefined ? "<li class='publ'><em>Publicerat:</em> " + doc.publishdate + ((doc.author !== undefined) ? "<span class='author'>, av " + doc.author : "") + "</span></li>" : "");
	            resultFooter += "<li class='paper " + doc.paper + "'><em>Tidning:</em> " + Translation.translateToPaperName(doc.paper) + "</li>";
	            resultFooter += "<li class='type'><em>Typ:</em> " + Translation.translateToTemplateName(doc.type) + "</li>";
	            if(typeof doc.grade !=='undefined' && doc.grade !== null && new String(doc.grade).replace(" ","") !== ""){
	            	resultFooter += "<li class='grade grade" + doc.grade + "'><em>Betyg:</em> " + doc.grade + "</li>";
	            }
	            if(typeof doc.geography !== 'undefined' && doc.geography !== null && new String(doc.geography).replace(" ","") !== ""){
	            	resultFooter += "<li class='geografy'><em>Plats:</em> " + doc.geography + "</li>";
	            }
	            resultFooter += "</ul>";
	            related.push("<div class='relatedEntry " + (typeof doc.type !== 'undefined' ? Translation.translateToTemplateName(doc.type).toLowerCase() : "") + " " + doc.paper + "'>" + resultHeader + resultTitle + resultContent + resultImages + resultFooter + "</div>");
            }
            else{
            	related.push("<div class='relatedEntry " + (typeof doc.type !== 'undefined' ? Translation.translateToTemplateName(doc.type).toLowerCase() : "") + " " + doc.paper + "'>" + "<div class='relatedTitle'>" + MM.util.toHref(doc.url, doc.name)  + "</div>" + "</div>");
            }
        });

        var wrapper = c.select("#relatedResults")[0];
        if(!wrapper){
        	wrapper = c.down('div.right');
        }
        wrapper.update( related.join("") );
    },

    renderFacets: function( facets ,c) {
      	var facetList = [];
        if(facets.length > 0){
	        facets.each(function(facet,index) {
	        	var selectableItemsLen = facet.selectableItems.length;
	        	var appliedItemsLen = facet.appliedItems.length;
	        	if (selectableItemsLen + appliedItemsLen > 0) {
	        		facetList.push("<ul class='facets'><li class='caption'>" + facet.facetName + "</li>");
		        	 if(selectableItemsLen > 0){
		        		 facet.selectableItems.each(function(item,index) {
		     	        	var facetClassName = "";
		    	        	if(index%2){
		    	        		facetClassName = "odd";
		    	        	}
		    	        	else {
		    	        		facetClassName = "even";
		    	        	}
			                if (item.count === 0) {
			                	if(item.displayName.length > 0){
				                    facetList.push("<li class='zeroHitFacet'>" + item.displayName + " (" + item.count + ")" + "</li>");
			                	}
			                } else {
			                	if(item.displayName.length > 0){
				                    facetList.push("<li class='" + facetClassName + "'>" + MM.util.toHref(item.paramId, Translation.translateToTemplateName(item.displayName) + " (" + item.count + ")") +"</li>");
			                	}
			                }
			            });
		        	 }
		        	 
		        	if(appliedItemsLen > 0){
			            facet.appliedItems.each(function(item) {
			                facetList.push("<li class='appliedFacet'>" + MM.util.toHref(item.paramId, Translation.translateToTemplateName(item.displayName) + " (" + item.count + ")") + "</li>");
			            });
		        	}
		            facetList.push("</ul>");
		         }
	        });
        }

        // Render facets
        var wrapper = c.select("#facets")[0];
        if(!wrapper){
        	wrapper = c.down('div.left');
        }
        wrapper.update( facetList.join("") );
        
        $$('li.caption').each(function(item){
        	if(item.innerHTML == 'Betyg'){
        		var li = item.next(0);
        		if(!li){
        			item.hide();
        		}
        	}
        });
    },

    renderPagination: function( pagination, meta, c ) {
        var result = [];
        var resultFirst = parseInt(pagination.offset) + 1;
        var resultLast = resultFirst + parseInt(pagination.hitsPerPage) - 1;
        var intervalText = MM.cfg.intervalText;
        
        if (resultLast >= meta.hits) {
        	resultLast = meta.hits;
        }
        
        intervalText = intervalText.replace("#[resultFirst]", resultFirst);
        intervalText = intervalText.replace("#[resultLast]", resultLast);
        intervalText = intervalText.replace("#[hits]", meta.hits);
        
        result.push(intervalText);

        result.push("Sida: ");

        if (pagination.prev !== null) {
            result.push("<span class='previous'>" + MM.util.toHref(pagination.prev.paramId, "F&ouml;reg&aring;ende") + "</span>");
        }

        pagination.paginationItems.each(function(page) {
        	var htmlToPush = "";
        	if(page.selected){
        		htmlToPush = "<span class='selectedPage'>" + page.displayName + "</span>";
        	}
        	else{
        		htmlToPush = MM.util.toHref(page.paramId, page.displayName);
        	}
            result.push(htmlToPush);
        });

        if (pagination.next !== null) {
            result.push("<span class='next'>" + MM.util.toHref(pagination.next.paramId, "N&auml;sta") + "</span>");
        }

        var wrapper1 = c.select("#paginationHead")[0];
        if(!wrapper1){
        	wrapper1 = c.down('div.fw-paginationHead');
        }
        wrapper1.update( result.join("") );
        var wrapper2 = c.select("#paginationFoot")[0];
        if(!wrapper2){
        	wrapper2 = c.down('div.fw-paginationFoot');
        }
        wrapper2.update( result.join("") );
    },

    renderSorting: function ( sorting,c ) {
    	if(!MM.cfg.sortingBeforeSearch){
	        var result = [];
	        if(sorting !== null && sorting.sortItems !== null){
		        result.push("<strong>Sortering:</strong> ");
		        sorting.sortItems.each(function(item) {
		        	var htmlToPush = "";
		        	if(item.selected){
		        		htmlToPush = "<span class='sortItem'>" + Translation.changeText(item.displayName) + "</span>";
		        	}
		        	else{
		        		htmlToPush = MM.util.toClassHref(item.paramId, Translation.changeText(item.displayName), "sortItemSelected");
		        	}
		            result.push(htmlToPush);
		         });
		
		        
		        var wrapper = c.select("#sorting")[0];
		        if(!wrapper){
		        	wrapper = c.down('div.fw-sorting');
		        }
		        wrapper.update( result.join("") );
	        }
    	}
    },

    renderResultInfoText: function( meta,c ) {
    	var wrapper = c.select("#resultInfoText")[0];
    	if(!wrapper){
    		wrapper = c.select(".resultInfo")[0].select("span")[0];
    	}
    	wrapper.update( MM.cfg.resultInfoText.replacePlaceholders(meta) );
    },

    renderResultQueryTimeText: function( meta,c ) {
    	var wrapper = c.select("#resultQueryTimeText")[0];
    	if(!wrapper){
    		wrapper = c.select(".resultInfo")[0].select("span")[1];
    	}
    	wrapper.update( MM.cfg.resultQueryTimeText.replacePlaceholders(meta) );
    },

    renderSuggestion: function( meta,c ) {
        var href = MM.util.toHref("?q=" + meta.suggestion,meta.suggestion);
        var wrapper = c.select("#suggestion")[0];
        if(!wrapper){
        	wrapper = c.down('span.fw-suggestion');
        }
        if(wrapper){
        	 wrapper.update( MM.cfg.suggestionText.replace("#[suggestion]", href) );
        }
       
    },

    renderErrorMessage: function ( message,c ) {
    	var wrapper = c.select("#errorMessage")[0];
    	if(!wrapper){
    		wrapper = c.down('div.fw-errorMessage');
    	}
    	wrapper.update(message);
    },

    renderConnectionErrorMessage: function (c) {
    	var wrapper = c.select("#errorMessage")[0];
    	if(!wrapper){
    		wrapper = c.down('div.fw-errorMessage');
    	}
    	wrapper.update("Trouble connecting to the search engine. <br />Please try again later. ");
    },
    
    renderBackLink : function(link,c){
         if(typeof link !== 'undefined' && link !== null){
        	 var wrapper = c.select("#facets")[0];
        	 if(!wrapper){
        		 wrapper = c.down('div.left');
        	 }
        	 wrapper.insert({top:link});
         }
    },
    
    clear: function (c) {
    	var wrapper;
    	wrapper = c.select("#resultQueryTimeText")[0];
    	if(typeof wrapper === 'undefined' || wrapper === null){
    		wrapper = c.down('div.resultInfo').down(1);
    		
    	}
    	wrapper.update("");
    	wrapper = c.select("#resultInfoText")[0];
    	if(typeof wrapper === 'undefined' || wrapper === null){
    		wrapper = c.down('div.resultInfo').down(0);
    	}
    	wrapper.update("");
    	wrapper = c.select("#paginationHead")[0];
    	if(typeof wrapper === 'undefined' || wrapper === null){
    		wrapper = c.down('div.fw-paginationHead');
    		
    	}
    	wrapper.update("");
    	wrapper = c.select("#paginationFoot")[0];
    	if(typeof wrapper === 'undefined' || wrapper === null){
    		wrapper = c.down('div.fw-paginationFoot');
    		
    	}
    	wrapper.update("");
    	wrapper = c.select("#backfillResults")[0];
    	if(typeof wrapper === 'undefined' || wrapper === null){
    		wrapper = c.down('div.middle').down(2);
    		
    	}
    	wrapper.update("");
    	wrapper = c.select("#relatedResults")[0];
    	if(typeof wrapper === 'undefined' || wrapper === null){
    		wrapper = c.down('div.right');
    		
    	}
    	wrapper.update("");
    	wrapper = c.select("#searchResults")[0];
    	if(typeof wrapper === 'undefined' || wrapper === null){
    		wrapper = c.down('div.content');
    		
    	}
    	wrapper.update("");
    	wrapper = c.select("#errorMessage")[0];
    	if(typeof wrapper === 'undefined' || wrapper === null){
    		wrapper = c.down('div.fw-errorMessage');
    	}
    	wrapper.update("");
    	wrapper = c.select("#suggestion")[0];
    	if(typeof wrapper === 'undefined' || wrapper === null){
    		wrapper = c.down('div.fw-suggestion');
    		
    	}
    	if(wrapper){
    		wrapper.update("");
    	}
    	if(!MM.cfg.sortingBeforeSearch){
    		wrapper = c.select("#sorting")[0];
    		if(typeof wrapper === 'undefined' || wrapper === null){
    			wrapper = c.down('div.fw-sorting');
        	}
    		if(wrapper){
    			wrapper.update("");
    		}
    		
    	}
    	wrapper = c.select("#facets")[0];
    	if(typeof wrapper === 'undefined' || wrapper === null){
    		wrapper = c.down('div.left');
    	}
    	wrapper.update("");
    }
};