<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Planete Sankore Image Search</title>
        <link rel="stylesheet" type="text/css" href="css/basic.css"/>
        <script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
        <script type="text/javascript">
            var category = "audio";
            var thumbnails = false;
            var minHeight = 177;
            var minWidth = 150;
            
            var currentIndex = 0;
            var currentTerm = "";
            var limit = 10;
            var filtersDisplayed = false; //display or hide filters
 
            function addPaginationLinks(totalResults) {
                var curPage = currentIndex; // check what page the app is on
                var pagesDiv = $("<div id='resultFooter' class='resultFooter'>");
                for (var i = 0; i < 8; i++) {
                    if (i * limit < totalResults) {
                   
                    var link = $("<a class='pager_button'></a>").attr('href', 'javascript:gotoPage('+i+');').html(i+1).appendTo(pagesDiv);
                    if (curPage == i) {
                        link.addClass('active');
                    }
                    }
                }

                $("#disc_nav_cont #resultFooter").remove();
                pagesDiv.insertBefore($('#disclaimer'));
                
                $(".imgContainer").each(function(){
                    this.addEventListener("dragstart", imageDragging, false);
                })
                
                $(".imgContainer").each(function(){
                    this.addEventListener("dragenter", imageDragenter, false);
                })
                
                $(".imgContainer").each(function(){
                    this.addEventListener("dragleave", imageDragleave, false);
                })
                
                $(".imgContainer").each(function(){
                    this.addEventListener("dragover", imageDragover, false);
                })
            }

            function searchFail(jqXHR, textStatus, errorThrown) {
              alert('Impossible to connect to Planete Sankore: ' + textStatus + ' ' + errorThrown);
            }

            function searchComplete(json) {
                    // Grab our content div, clear it.
                    var totalResults = json.totalResults;
                    var contentDiv = $('#searchResult').empty();
                    // Loop through our results, printing them to the page.
                    var results = json.rows;
                    for (var i = 0; i < results.length; i++) {
                        // For each result write it's title and image to the screen
                        var result = results[i];
                        var imgContainer = $("<div class='imgContainer' draggable='true'>");
                        var title = document.createElement('div');
                        var iUrl = $("<input type='hidden'/>");
                        var iContent = $("<input type='hidden'/>");
                        var iHeight = $("<input type='hidden'/>");
                        var iWidth = $("<input type='hidden'/>");
                        var iTitle = $("<input type='hidden'/>");
            
                        // We use titleNoFormatting so that no HTML tags are left in the 
                        // title
                        title.innerHTML = result.title;
                           	var newImg = document.createElement('img');

                        	// There is also a result.file property which has the escaped version
                            if (thumbnails) {
        	                   	newImg.src = result.file;
                            } else {
        	                   	newImg.src = "./images/thumbnail_icon.png";
            				}
                        	var imgWidth = (result.tbWidth > minWidth)?result.tbWidth:minWidth;
                        	var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight;
                        	imgContainer.width(imgWidth).height(imgHeight);
                        	imgContainer.append($(newImg));
			            iUrl.attr("value", result.file);
                        iContent.attr("value", result.title);
     		        iHeight.attr("value", result.height);
                        iWidth.attr("value", result.width);
                        iTitle.attr("value",result.title);
                        imgContainer.append($(title));  
                        imgContainer.append(iUrl);
                        imgContainer.append(iContent);
                        imgContainer.append(iHeight);
                        imgContainer.append(iWidth);
                        imgContainer.append(iTitle);

                        // Put our title + image in the content
                        imgContainer.appendTo(contentDiv);

                    }
                    // Now add links to additional pages of search results.
                    addPaginationLinks(totalResults);
            }

            function imageDragging(e){
                e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val());
            }
            
            function imageDragleave(e){
                return false;
            }
            
            function imageDragover(e){
                return false;
            }
            
            function imageDragenter(e){
                return false;
            }
            
            $(document).ready(function(){

                //variables
                var mode = false; //search or view mode
                var hide = false; //hide or no main panel
    
                //basic containers and elements       
                var disc_nav_cont = $("<div id='disc_nav_cont' class='disc_nav_cont'>").appendTo("body");    
                var disclaimer = $("<div id='disclaimer' class='disclaimer'>Recherche de documents audio sur Planète Sankoré<div>").appendTo(disc_nav_cont);
                var search = $("<div id='search' class='search'>").appendTo("body");
				    
                var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search);
                var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages);
    
                var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search);
                var subSearchFilter = $("<div id='subSearchFilter' class='subSearch'>").appendTo(search);
    
                var searchInput = $("<input id='searchInput' class='searchInput' type='text'/>").appendTo(subSearchInput);
                var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput);
                // var toggleFilters = $("<div id='toggleFilters' class='toggleFilters'>").appendTo(subSearchInput);
    
                //adding filters to the wgt
                var selectFilter = $("<select id='sizeFilter' class='filterSelect'>")
                .append($("<option value='0'>Any</option>"))
                .append($("<option value='1'>Small</option>"))
                .append($("<option value='2'>Medium</option>"))
                .append($("<option value='3'>Large</option>"))
                .append($("<option value='4'>Extra large</option>"));
                $("<div class='filterContainer'>").append("<span>Size:</span>").append(selectFilter).appendTo(subSearchFilter);
                
                //mouse click actions 
                /*
                toggleFilters.click(function(){
                    if(filtersDisplayed){
                        subSearchFilter.hide();
                        toggleFilters.css("background-image","url(images/down.png)");
                        filtersDisplayed = false;
                    } else {
                        subSearchFilter.show();
                        toggleFilters.css("background-image","url(images/up.png)");
                        filtersDisplayed = true;
                    }
                });
                */

		/*togglePages.click(function(event){
                    if(mode){
                        hide = false;
                        $("#search, #disclaimer").slideDown('slow', function(){
                            toggleIcon.css("background-image","url(images/trgUp.png)");
                            togglePages.appendTo("#search").css("top","").css("bottom","-14px");                            
                        });
                        mode = false;
                    } else {
                        hide = true;
                        $("#search, #disclaimer").slideUp('slow', function(){
                            toggleIcon.css("background-image","url(images/trgDown.png)");
                            togglePages.appendTo("body").css("top","0");                            
                        });
                        mode = true;
                    }
                });*/
                
                searchButton.click(function(){
                    if(!hide){
                        runSearch(searchInput.val(), 0);
                        //togglePages.trigger("click");
                    }
                });
                
                searchInput.keydown(function(event){
                    if(!hide){
                        if((event.keyCode == 0xA)||(event.keyCode == 0xD)){
                            runSearch(searchInput.val(), 0);
                            //togglePages.trigger("click");
                        }
                              
                    }
                });
                (
                $(".imgContainer").live("click",function(){
		    sankore.sendFileMetadata(createMetaData($(this)));
                }));
                
				/*$(window).resize(function(){
                    disclaimer.width($("body").width()-20);
                    search.width($("body").width()-20);
                    toggleIcon.css("margin-left",(togglePages.width()/2 - 7));
                })*/
				
            });
            
            function gotoPage(i) { 
		runSearch(currentTerm, i);             
            } 

            // launching the search on planete sankore 
            function runSearch(term, index) {
                currentTerm = term;
                currentIndex = index;
		var start = index * limit;
                var url = "http://planete.sankore.org/xwiki/bin/view/Search/Resources?xpage=plain&category=" + category + "&level=&sort=title&dir=ASC&terms=" + escape(term) + "&start=" + start + "&limit=" + limit;
		$.ajax({
			url: url,
  			success: searchComplete,
  			error: searchFail,
                        dataType: "json"
		});
            }
 
            function createMetaData(parent){
                var meta = "";
                //alert($(this).find("input:hidden").eq(0).val());
                meta = "<metadata><data><key>Type</key><value>Audio</value></data><data><key>Url</key><value>" + 
                    parent.find("input:hidden").eq(0).val() + 
                    "</value></data><data><key>Content</key><value>" + 
                    parent.find("input:hidden").eq(1).val() +
                    "</value></data><data><key>Height</key><value>n/a</value></data>"+
                    "<data><key>Width</key><value>n/a</value></data><data><key>Title</key><value>" +
                    parent.find("input:hidden").eq(4).val() +
                    "</value></data></metadata>";
                return meta;
            }
        </script>

    </head>
    <body style="font-family: Arial;border: 0 none;">
        <div id="searchResult"></div>
    </body>
</html>