<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Google Image Search</title>
        <link rel="stylesheet" type="text/css" href="css/basic.css"/>
        <script type="text/javascript" src="http://www.google.com/uds"></script>
        <script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
        <script type="text/javascript">
            // This code generates a "Raw Searcher" to handle search queries. The Raw Searcher requires
            // you to handle and draw the search results manually.
            google.load('search', '1');

            var videoSearch;
            var minHeight = 180;
            var minWidht = 150;
            var filtersDisplayed = false; //display or hide filters
            
            function addPaginationLinks() {
      
                // To paginate search results, use the cursor function.
                var cursor = videoSearch.cursor;
                var curPage = cursor.currentPageIndex; // check what page the app is on
                var pagesDiv = $("<div id='resultFooter' class='resultFooter'>");
                for (var i = 0; i < cursor.pages.length; i++) {
                    var page = cursor.pages[i];
                    if (curPage == i) { 

                        // If we are on the current page, then don't make a link.
                        var label = document.createTextNode(' ' + page.label + ' ');
                        pagesDiv.append($(label));
                    } else {

                        // Create links to other pages using gotoPage() on the searcher.
                        var link = document.createElement('a');
                        link.href = 'javascript:videoSearch.gotoPage('+i+');';
                        link.innerHTML = page.label;
                        link.style.marginRight = '2px';
                        pagesDiv.append($(link));
                    }
                }

                pagesDiv.appendTo($('#searchResult'));
                
                $(".videoContainer").each(function(){
                    this.addEventListener("dragstart", imageDragging, false);
                })
                
                $(".videoContainer").each(function(){
                    this.addEventListener("dragenter", imageDragenter, false);
                })
                
                $(".videoContainer").each(function(){
                    this.addEventListener("dragleave", imageDragleave, false);
                })
                
                $(".videoContainer").each(function(){
                    this.addEventListener("dragover", imageDragover, false);
                })
            }
            
            function searchComplete() {

                // Check that we got results
                document.getElementById('searchResult').innerHTML = '';
                if (videoSearch.results && videoSearch.results.length > 0) {
                    
                    var contentDiv = $('#searchResult').empty();
                    var results = videoSearch.results;
                    for (var i = 0; i < results.length; i++) {

                        // Create HTML elements for search results
                        var result = results[i];
                        /*var str = videoSearch.results[i].playUrl.replace("&autoplay=1","").replace("&autoplay=true","");
                        alert(str)
                        a.src = str + "&autoPlay=false";
                        a.type = "application/x-shockwave-flash";*/

                        // Append search results to the HTML nodes
                        //p.appendChild(a);
                        //document.body.appendChild(p);
                        
                        var videoContainer = $("<div class='videoContainer' draggable='true'>");
                        var title = document.createElement('div');
                        var vUrl = $("<input type='hidden'/>");
                        var vContent = $("<input type='hidden'/>");
                        var vHeight = $("<input type='hidden'/>");
                        var vWidth = $("<input type='hidden'/>");
                        var vTitle = $("<input type='hidden'/>");
                        var vAuthor = $("<input type='hidden'/>");
                        var vDuration = $("<input type='hidden'/>");
                        var vPublished = $("<input type='hidden'/>");
                        var vPublisher = $("<input type='hidden'/>");
                        var vRating = $("<input type='hidden'/>");
                        var vCount = $("<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.url property which has the escaped version
                        newImg.src = result.tbUrl;
                        //var str = videoSearch.results[i].playUrl.replace("&autoplay=1","").replace("&autoplay=true","");
                        vUrl.attr("value", result.url);
                        vContent.attr("value", result.content);
                        vHeight.attr("value", result.tbHeight);
                        vWidth.attr("value", result.tbWidth);
                        vTitle.attr("value",result.titleNoFormatting);
                        vAuthor.attr("value", result.author);
                        vDuration.attr("value", result.duration);
                        vPublished.attr("value", result.published);
                        vPublisher.attr("value", result.publisher);
                        vRating.attr("value",result.rating);
                        vCount.attr("value",result.viewCount);
                        //var imgWidth = (result.tbWidth > minWidht)?result.tbWidth:minWidht;
                        //var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight;
                        videoContainer.width(minWidht).height(minHeight);
                        videoContainer.append($(newImg));
                        videoContainer.append($(title));  
                        videoContainer.append(vUrl);
                        videoContainer.append(vContent);
                        videoContainer.append(vHeight);
                        videoContainer.append(vWidth);
                        videoContainer.append(vTitle);
                        videoContainer.append(vAuthor);
                        videoContainer.append(vDuration);
                        videoContainer.append(vPublished);
                        videoContainer.append(vPublisher);
                        videoContainer.append(vRating);
                        videoContainer.append(vCount);

                        // Put our title + image in the content
                        videoContainer.appendTo(contentDiv);
                    }
                    
                    addPaginationLinks(videoSearch);
                }
            }

            function onLoad() {
                // Create a VideoSearch instance.
                videoSearch = new google.search.VideoSearch();

                // Set searchComplete as the callback function when a search is complete.  The
                // videoSearch object will have results in it.
                videoSearch.setSearchCompleteCallback(this, searchComplete, null);
                
                videoSearch.setResultSetSize(8);

                // Include the required Google branding
                google.search.Search.getBranding('branding');
            }

            // Set a callback to call your code when the page loads
            google.setOnLoadCallback(onLoad);
            
            function imageDragging(e){
                e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val());
                //alert($(this).find("input:hidden").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 disclaimer = $("<div id='disclaimer' class='disclaimer'>Disclaimer<div>").appendTo("body");    
                var search = $("<div id='search' class='search'>").appendTo("body");
                
                disclaimer.width($("body").width()-20);
                search.width($("body").width()-20);
    
                var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search);
                var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages).css("margin-left",(togglePages.width()/2 - 7));
    
                var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search);                
    
                var searchInput = $("<input id='searchInput' class='searchInput' type='text'/>").appendTo(subSearchInput);
                var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput);                
    
                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){
                        videoSearch.execute(searchInput.val());
                        togglePages.trigger("click");
                    }
                });
                
                searchInput.keydown(function(event){
                    if(!hide){
                        if((event.keyCode == 0xA)||(event.keyCode == 0xD)){
                            videoSearch.execute(searchInput.val());
                            togglePages.trigger("click");
                        }
                              
                    }
                });
                
                $(".videoContainer").live("click",function(){
                    //alert(createMetaData($(this)));
                    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 createMetaData(parent){
                var meta = "";
                //alert($(this).find("input:hidden").eq(0).val());
                meta = "<metadata><data><key>Type</key><value>Video</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>tbHeight</key><value>" + 
                    parent.find("input:hidden").eq(2).val() +
                    "</value></data><data><key>tbWidth</key><value>" +
                    parent.find("input:hidden").eq(3).val() +
                    "</value></data><data><key>Title</key><value>" +
                    parent.find("input:hidden").eq(4).val() +
                    "</value></data><data><key>Author</key><value>" + 
                    parent.find("input:hidden").eq(5).val() +
                    "</value></data><data><key>Duration</key><value>" +
                    parent.find("input:hidden").eq(6).val() +
                    "</value></data><data><key>Published</key><value>" +
                    parent.find("input:hidden").eq(7).val() +
                    "</value></data><data><key>Publisher</key><value>" +
                    parent.find("input:hidden").eq(8).val() +
                    "</value></data><data><key>Rating</key><value>" +
                    parent.find("input:hidden").eq(9).val() +
                    "</value></data><data><key>View count</key><value>" +
                    parent.find("input:hidden").eq(10).val() +
                    "</value></data></metadata>";
                return meta;
            }
            
        </script>

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