first version of google image search widget

resources/library/search/ImgSearch.wgs/config.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<widget xmlns="http://www.w3.org/ns/widgets" 
+		xmlns:ub="http://uniboard.mnemis.com/widgets"
+        id="http://uniboard.mnemis.com/widgets/webbrowser" 
+        version="1.1"
+        width="900"
+        height="500" 
+		ub:resizable="true">   
+		     
+  		<name>Choisir</name>
+		<author href="http://www.getuniboard.com"
+	            email="info@mnemis.com">Mnemis SA</author>
+		<description>Choisir widget</description> 
+
+ 		<content src="index.html"/> 
+</widget>

resources/library/search/ImgSearch.wgs/css/basic.css

@@ -0,0 +1,184 @@
+body{
+    width: 100%;
+    padding: 0;
+    height: auto;
+    background-color: white;
+    margin: 0;
+}
+
+.disclaimer{
+    width: 90%;
+    height: 50px;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    margin-left: 1px;
+    margin-right: 1px;
+    margin-bottom: 0px;
+    padding: 5px;
+    text-align: center;
+    background-color: #BBBBBB;
+    -webkit-border-top-left-radius: 15px;
+    -webkit-border-top-right-radius: 15px;
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    border: solid 4px #EEEEEE;
+    border-bottom: none;
+    z-index: 10;
+}
+
+.search{
+    width: 90%;    
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin-left: 1px;
+    margin-right: 1px;
+    margin-top: 0px;
+    padding: 5px;
+    background-color: #BBBBBB;
+    -webkit-border-bottom-left-radius: 15px;
+    -webkit-border-bottom-right-radius: 15px;
+    border-bottom-left-radius: 15px;
+    border-bottom-right-radius: 15px;
+    border: solid 4px #EEEEEE;
+    border-top: none;
+    z-index: 10;
+}
+
+.togglePages{
+    padding: 0;
+    position: absolute;
+    bottom: -14px;
+    left: 43%;
+    width: 15%;
+    height: 10px;
+    background-color: #666;
+    -webkit-border-bottom-left-radius: 5px;
+    -webkit-border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    -webkit-box-shadow: #dadada -1px 0 4px;
+    box-shadow: #dadada -1px 0 4px;
+    cursor: pointer;
+}
+
+.toggleIcon{
+    width: 14px;
+    height: 10px;
+    background-image: url(../images/trgUp.png);
+}
+
+.searchInput{
+    margin: 10px 5px 10px 5px;
+    padding: 2px;
+    padding-left: 8px;
+    padding-right:8px;
+    float: left;
+    width: 60%;
+    border-radius: 15px;
+    border-style: none;
+}
+
+.searchButton{
+    width: 32px;
+    height: 32px;
+    margin: 5px 5px;
+    background-image: url(../images/search.png);
+    float: left;
+    cursor: pointer;
+}
+
+.subSearch{
+    margin: 0;
+    float: left;    
+}
+
+#subSearchInput{
+    width: 100%;
+    float: left;
+}
+
+#subSearchFilter{
+    width: 100%;
+    float: left;
+    display: none;
+}
+
+.searchResult{
+    width: 98%;
+    padding: 3px;
+    background-color:#123456;
+}
+
+.imgContainer{
+    float: left;
+    padding: 3px;
+    margin: 3px;
+    text-align: center;
+    overflow: hidden;
+    font-size: small;
+    font-family: Verdana,Arial,Helvetica,sans-serif;
+    border: 1px solid #666;
+    border-radius: 5px;
+    -webkit-box-shadow: #dadada -1px 0 4px;
+    -webkit-border-radius: 5px;
+    box-shadow: #666 -1px 0 4px;
+}
+
+.resultFooter{
+    float: left;
+    margin: 5px;
+    padding: 3px;
+    width: 100%;
+    font-family: Verdana,Arial,Helvetica,sans-serif;
+    font-weight: bold;
+    font-size: x-large;
+}
+
+#branding{
+    position: absolute;
+    top: 0;
+    left: 10px;
+    z-index: 2;
+}
+
+.filterContainer{
+    float: left;
+    margin: 2px;
+    padding: 2px;
+    font-size: 14px;
+    
+}
+
+.filterSelect{
+    border-style:none;
+    -webkit-border-top-right-radius: 15px;
+    -webkit-border-bottom-right-radius: 15px;
+    -moz-border-radius-topright: 15px;
+    -moz-border-radius-bottomright: 15px;
+    border-top-right-radius: 15px;
+}
+
+span{    
+    font-family: Verdana,Arial,Helvetica,sans-serif;
+    color: #666;
+}
+
+[draggable] {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.toggleFilters{
+    margin: 0;
+    padding: 0;
+    background-position: center;
+    background-image: url(../images/down.png);
+    position: absolute;
+    bottom: 2px;
+    right: 2px;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+}

resources/library/search/ImgSearch.wgs/index.html

@@ -0,0 +1,451 @@
+<!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">
+
+            //begin google API
+            google.load("search","1");
+
+            var imageSearch;
+            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 = imageSearch.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:imageSearch.gotoPage('+i+');';
+                        link.innerHTML = page.label;
+                        link.style.marginRight = '2px';
+                        pagesDiv.append($(link));
+                    }
+                }
+
+                pagesDiv.appendTo($('#searchResult'));
+                
+                $(".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 searchComplete() {
+
+                // Check that we got results
+                if (imageSearch.results && imageSearch.results.length > 0) {
+
+                    // Grab our content div, clear it.
+                    var contentDiv = $('#searchResult').empty();
+
+                    // Loop through our results, printing them to the page.
+                    var results = imageSearch.results;
+                    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.url property which has the escaped version
+                        newImg.src = result.tbUrl;
+                        iUrl.attr("value", result.url);
+                        iContent.attr("value", result.contentNoFormatting);
+                        iHeight.attr("value", result.height);
+                        iWidth.attr("value", result.width);
+                        iTitle.attr("value",result.titleNoFormatting);
+                        var imgWidth = (result.tbWidth > minWidht)?result.tbWidth:minWidht;
+                        var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight;
+                        imgContainer.width(imgWidth).height(imgHeight);
+                        imgContainer.append($(newImg));
+                        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(imageSearch);
+                }
+            }
+
+            function OnLoad() {
+      
+                // Create an Image Search instance.
+                imageSearch = new google.search.ImageSearch();
+
+                // Set searchComplete as the callback function when a search is 
+                // complete.  The imageSearch object will have results in it.
+                imageSearch.setSearchCompleteCallback(this, searchComplete, null);
+                
+                imageSearch.setResultSetSize(8);
+                //imageSearch.setQueryAddition("Subaru STI");
+                // Find me a beautiful car.
+                //imageSearch.execute("Sankore");
+        
+                // Include the required Google branding
+                google.search.Search.getBranding('branding');
+            }
+            google.setOnLoadCallback(OnLoad);
+            //end of Google API
+            
+            //No google API below            
+            
+            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 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);
+                
+                selectFilter = $("<select id='colorizFilter' class='filterSelect'>")
+                .append($("<option value='0'>Any</option>"))
+                .append($("<option value='1'>Grayscale</option>"))
+                .append($("<option value='2'>Color</option>"));
+                $("<div class='filterContainer'>").append("<span>Colorization:</span>").append(selectFilter).appendTo(subSearchFilter);
+                 
+                selectFilter = $("<select id='colorFilter' class='filterSelect'>")
+                .append($("<option value='0'>Any</option>"))
+                .append($("<option value='1'>Black</option>"))
+                .append($("<option value='2'>Blue</option>"))
+                .append($("<option value='3'>Brown</option>"))
+                .append($("<option value='4'>Gray</option>"))
+                .append($("<option value='5'>Green</option>"))
+                .append($("<option value='6'>Orange</option>"))
+                .append($("<option value='7'>Pink</option>"))
+                .append($("<option value='8'>Purple</option>"))
+                .append($("<option value='9'>Red</option>"))
+                .append($("<option value='10'>Teal</option>"))
+                .append($("<option value='11'>White</option>"))
+                .append($("<option value='12'>Yellow</option>"));
+                $("<div class='filterContainer'>").append("<span>Main color:</span>").append(selectFilter).appendTo(subSearchFilter);
+                 
+                selectFilter = $("<select id='fileTypeFilter' class='filterSelect'>")
+                .append($("<option value='0'>Any</option>"))
+                .append($("<option value='1'>*.JPG</option>"))
+                .append($("<option value='2'>*.PNG</option>"))
+                .append($("<option value='3'>*.GIF</option>"))
+                .append($("<option value='4'>*.BMP</option>"));
+                $("<div class='filterContainer'>").append("<span>File type:</span>").append(selectFilter).appendTo(subSearchFilter);
+                
+                selectFilter = $("<select id='typeFilter' class='filterSelect'>")
+                .append($("<option value='0'>Any</option>"))
+                .append($("<option value='1'>Faces</option>"))
+                .append($("<option value='2'>Photo</option>"))
+                .append($("<option value='3'>Clipart</option>"))
+                .append($("<option value='4'>Lineart</option>"));
+                $("<div class='filterContainer'>").append("<span>Image type:</span>").append(selectFilter).appendTo(subSearchFilter);
+                
+                selectFilter = $("<select id='rightsFilter' class='filterSelect'>")
+                .append($("<option value='0'>Any</option>"))
+                .append($("<option value='1'>Reuse</option>"))
+                .append($("<option value='2'>Comercial reuse</option>"))
+                .append($("<option value='3'>Modification</option>"))
+                .append($("<option value='4'>Comercial modification</option>"));
+                $("<div class='filterContainer'>").append("<span>Image type:</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){
+                        checkFilters(imageSearch).execute(searchInput.val());
+                        togglePages.trigger("click");
+                    }
+                });
+                
+                searchInput.keydown(function(event){
+                    if(!hide){
+                        if((event.keyCode == 0xA)||(event.keyCode == 0xD)){
+                            checkFilters(imageSearch).execute(searchInput.val());
+                            togglePages.trigger("click");
+                        }
+                              
+                    }
+                });
+                (
+                $(".imgContainer").live("click",function(){
+                    //alert(createMetaData($(this)));
+					sankore.sendFileMetadata(createMetaData($(this)));
+                }));
+                
+                //checking filters
+                function checkFilters(imgSearch){
+                    var value = $("#sizeFilter option:selected").val();
+                    switch(value){
+                        case "0":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,null);
+                            break;
+                        case "1":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,google.search.ImageSearch.IMAGESIZE_SMALL);
+                            break;
+                        case "2":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,google.search.ImageSearch.IMAGESIZE_MEDIUM);
+                            break;
+                        case "3":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,google.search.ImageSearch.IMAGESIZE_LARGE);
+                            break;
+                        case "4":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,google.search.ImageSearch.IMAGESIZE_EXTRA_LARGE);
+                            break;
+                    }
+                    
+                    value = $("#colorizFilter option:selected").val();
+                    switch(value){
+                        case "0":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORIZATION,null);
+                            break;
+                        case "1":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORIZATION,google.search.ImageSearch.COLORIZATION_GRAYSCALE);
+                            break;
+                        case "2":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORIZATION,google.search.ImageSearch.COLORIZATION_COLOR);
+                            break;
+                    }
+                    
+                    value = $("#colorFilter option:selected").val();
+                    switch(value){
+                        case "0":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,null);
+                            break;
+                        case "1":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_BLACK);
+                            break;
+                        case "2":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_BLUE);
+                            break;
+                        case "3":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_BROWN);
+                            break;
+                        case "4":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_GRAY);
+                            break;
+                        case "5":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_GREEN);
+                            break;
+                        case "6":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_ORANGE);
+                            break;
+                        case "7":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_PINK);
+                            break;
+                        case "8":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_PURPLE);
+                            break;
+                        case "9":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_RED);
+                            break;
+                        case "10":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_TEAL);
+                            break;
+                        case "11":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_WHITE);
+                            break;
+                        case "12":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_YELLOW);
+                            break;
+                    }
+                    
+                    value = $("#fileTypeFilter option:selected").val();
+                    switch(value){
+                        case "0":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_FILETYPE,null);
+                            break;
+                        case "1":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_FILETYPE,google.search.ImageSearch.FILETYPE_JPG);
+                            break;
+                        case "2":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_FILETYPE,google.search.ImageSearch.FILETYPE_PNG);
+                            break;
+                        case "3":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_FILETYPE,google.search.ImageSearch.FILETYPE_GIF);
+                            break;
+                        case "4":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_FILETYPE,google.search.ImageSearch.FILETYPE_BMP);
+                            break;                        
+                    }
+                    
+                    value = $("#typeFilter option:selected").val();
+                    switch(value){
+                        case "0":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGETYPE,null);
+                            break;
+                        case "1":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGETYPE,google.search.ImageSearch.IMAGETYPE_FACES);
+                            break;
+                        case "2":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGETYPE,google.search.ImageSearch.IMAGETYPE_PHOTO);
+                            break;
+                        case "3":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGETYPE,google.search.ImageSearch.IMAGETYPE_CLIPART);
+                            break;
+                        case "4":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGETYPE,google.search.ImageSearch.IMAGETYPE_LINEART);
+                            break;                        
+                    }
+                    
+                    value = $("#rightsFilter option:selected").val();
+                    switch(value){
+                        case "0":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,null);
+                            break;
+                        case "1":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,google.search.ImageSearch.RIGHTS_REUSE);
+                            break;
+                        case "2":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,google.search.ImageSearch.RIGHTS_COMERCIAL_REUSE);
+                            break;
+                        case "3":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,google.search.ImageSearch.RIGHTS_MODIFICATION);
+                            break;
+                        case "4":
+                            imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,google.search.ImageSearch.RIGHTS_COMMERCIAL_MODIFICATION);
+                            break;                        
+                    }
+                    return imgSearch;
+                }
+                
+				$(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>Image</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>" + 
+                    parent.find("input:hidden").eq(2).val() +
+                    "</value></data><data><key>Width</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></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>