<script type="text/javascript">

        // pageChanged & sizeChanged functions are needed in every model file
        // other functions for model should also be in here to avoid conflicts
        var delicious = new function() {
                // function called every time the page is viewed after it has initially loaded
                this.pageChanged = function() {

                }

                // function called every time the size of the LO is changed
                this.sizeChanged = function() {

                }

                this.showLinks = function(data) {
                        clearTimeout(errorTimer);
                        $("#loadingSpinner").hide();
                        var tableString = "";
                        if (data.length == 0) {
                                tableString = '<tr><td>No results returned!!</td></tr>';  // ** Need to take this from the language file
                        } else {
                                $.each(data, function (index, value) {
                                        tableString += '<tr><td><a href="' + value.u + '">' + value.d + '</a></td></tr>';
                                });
                        }
                        $resultsTable
                                .html(tableString)
                                .find("tr:even").addClass("shaded");
                }
        }

        var $pageContents = $("#pageContents");
        var $textHolder = $("#textHolder");
        var $panel = $("#pageContents .panel");
        var $resultsTable = $pageContents.find("#resultsTable");

        var deliciousSearch = x_currentPageXML.getAttribute("search");
        var deliciousTerm = x_currentPageXML.getAttribute("term");
        var deliciousCount = x_currentPageXML.getAttribute("results");

        var deliciousURL;
        if (deliciousSearch == 'popular'){
                deliciousURL = "http://feeds.delicious.com/v2/json/popular/"; // ** Doesn't seem to be an equivalent JSON url??
        } else if (deliciousSearch == 'user'){
                deliciousURL = "http://feeds.delicious.com/v2/json/" + encodeURI(deliciousTerm);
        } else { //recent - default
                deliciousSearch = 'tag';
                deliciousURL = "http://feeds.delicious.com/v2/json/tag/" + encodeURI(deliciousTerm);
        }

        var errorTimer = setTimeout(function() {
                $("#loadingSpinner").hide();
                $resultsTable
                        .html('<tr><td>There was an error loading the results!!</td></tr>') // ** Need to take this from the language file
                        .find("tr:even").addClass("shaded");
    }, 8000);

        $.ajax({
                beforeSend: function() {
                     $('#loadingSpinner').show();
                },
                url: deliciousURL,
                data: {count : deliciousCount},
                dataType: 'jsonp',
                jsonp: 'callback',
                jsonpCallback: "delicious.showLinks",
        cache:false
        });

        $panel.addClass("x_floatRight");
        $panel.addClass("width60");

        $pageContents.find("#headerHolder").html("<p>" + "Delicious bookmarks for '" + deliciousSearch + " '" + deliciousTerm + "'</p>"); // ** Need to take this from the language file
        $textHolder.html(x_addLineBreaks(x_currentPageXML.getAttribute("text")));

        // call this function in every model once everything's loaded
        x_pageLoaded();

</script>

<style type="text/css">

        #resultsTable {
                width:  100%;
        }

        #headerHolder {
                text-align:             center;
                font-weight:    bold;
        }

        #loadingSpinner {
                display:        none;
                text-align:     center;
                font-weight:    bold;
        }

        #loadingSpinner img {
                margin-right: 20px;
                vertical-align: middle;
        }

</style>

<div id="pageContents">

        <div id="deliciousHolder" class="mobileAlign"> <!-- this tag is only used when viewed on mobiles to change layout -->
                <div class="panel inline">
                        <div id="headerHolder"></div>
                        <table id="resultsTable"></table>
                        <div id="loadingSpinner"><img src="media/spinner.gif" alt="Fetching results" />Fetching results...</div>
                </div>
        </div>

        <div id="textHolder">

        </div>

</div>