document.observe('dom:loaded', function() {
    rltw_searchClips($(pageElements.get('rltw_clipResContainer')), '', '', RLTW_CLIPS_PER_PAGE);
});    

/* ---Description---
* The selectClip function is used as the onclick function for
* the clips in this example. Each clip DIV on the right-hand side
* uses this function to call the playEmbed function as well as to
* highlight itself as the currently clicked clip. The additional
* clips are iterated through to set them back to the unselected state
* ---Parameters---
* resourceId - The GUID of the clip that is to be loaded into the player
* element - The HTML element that should be set to the active clip state.
*     In this example, each div passes itself(this) through to the function.
*/
function rltw_selectClip(resourceId, element) {
    window.open(rltw_clipLinkBase + resourceId);
}

/* ---Description---
* The searchClips function is used to limit the search results based 
* on a user's query. The results are then populated in the given element.
* Unlike populatePopularClips, the limit of searchClips is not how many elements
* are displayed on the page, but rather how many results are available to page through.
* ---Parameters---
* elementId - The ID of the HTML element that should contain the results
* term - An search term that is used to limit the results
* cat - A category can be used to limit the results to a specific category
* limit - The amount of results to show on each page of results.
*     **NOTE: the limit does NOT specify the number of results, rather it is the
*          amount of elements on each page of results. To limit the amount of 
*          results returned, the global variable MAX_RESULTS must be changed.
*/
function rltw_searchClips(elementId, term, cat, limit) {
    var channel = "";
    api.Clip.searchClipsWithFilter(term, cat, PARTNER_GUID, RLTW_MAX_RESULTS, 'channel', channel, function(data) {
        if (data != null
           && data.length > 0) {
            //The paginator is used to store all of the results from the clipSearch
            //and only display the amount of clips specified per page.
            rltw_paginator = new RedLasso.Util.Paginator(data, api, rltw_buildClips, limit);

            //Below is used to handle the display of the nav buttons for the paginator
            if (data.length <= RLTW_CLIPS_PER_PAGE) {
                $(pageElements.get('rltw_prevBttn')).fade();
                $(pageElements.get('rltw_nextBttn')).fade();
            }
            else {
                $(pageElements.get('rltw_prevBttn')).fade();
                $(pageElements.get('rltw_nextBttn')).appear();
            }
        }
        else {
            $(elementId).innerHTML = "<i>No results.</i>";
            $(pageElements.get('rltw_prevBttn')).fade();
            $(pageElements.get('rltw_nextBttn')).fade();
        }
    });
}

/* ---Description---
* The buildClips function is used to take the results of the searchClips
* function and construct a visible resultset inside the given HTML element. 
* In this example, an individually formatted div is created for each
* displayed clip, including a thumbnail, title, and airdate. In this example,
* the buildClips function is called by the JS-API's Paginator object.
* ---Parameters---
* data - The resultset of clips and clipinfo
* elementID - The ID of the element to build the results inside
* opt_fn (optional) - An optional callback function called after the build is complete.
*     In this example, the opt_fn is utilized after popularClips are finised building
*     to load the first clip into the player. 
*/
var test = new Array();
function rltw_buildClips(data, elementID, opt_fn) {
    if (!elementID) elementID = pageElements.get('rltw_clipResContainer');
    $(elementID).innerHTML = "";
    var idSuffix = '_rltwdiv';

    for (var i = 0; i < data.length; i++) {
        //The following is used to limit the title length to fit in the DIV element
        var title = data[i].t;
        if (title.length > 50)
            title = title.substr(0, 50) + "...";
        //Formatting the airdate to make it look presentable
        var airDate = data[i].aired.substr(0, data[i].aired.indexOf(" "));
        //Below is where the clip's div is generated and attached to the containing element
	var newEl = new Element('div', {title: data[i].t, 'class': 'rl_clip', id: data[i].g + idSuffix});
        newEl.setAttribute('class', 'rl_clip'); // needed for IE8, prototype does set class correctly 
	newEl.style.display = 'none';
	newEl.observe('click', function(){
	    
	    rltw_selectClip(this.id.substring(0, this.id.lastIndexOf('_')), this);
	});

	$(elementID).insert(newEl);
	var html = "<img id=\"" + data[i].g + "_img\" src=\"" + data[i].thumburl + "\"/><div class='title'>" + title + "<br/>Aired: " + airDate + "</div></div>";
	newEl.innerHTML = html;

	var timeout = 500 + (i * 100);
        Effect.Appear.delay(timeout / 1000, newEl, {duration: 1.0});

    }
    
    if (opt_fn) opt_fn();
}

/* ---Description---
* This is a helper function for the paginator that is attached to the
* onclick of the next button. It handles getting the next set of results
* as well as making sure the nav buttons are enabled/disabled depending
* on the remaining results
*/
function rltw_getNext() {
    $(pageElements.get('rltw_clipResContainer')).innerHTML = "Loading...";
    $(pageElements.get('rltw_nextBttn')).stopObserving('click', rltw_getNext);

    if (rltw_paginator.next()) {
        $(pageElements.get('rltw_nextBttn')).observe('click', rltw_getNext);
        if ($(pageElements.get('rltw_nextBttn')).style.display == "none") $(pageElements.get('rltw_nextBttn')).appear();
    }
    else {

        if ($(pageElements.get('rltw_nextBttn')).style.display != "none") $(pageElements.get('rltw_nextBttn')).fade();
    }

    $(pageElements.get('rltw_prevBttn')).observe('click', rltw_getPrev);
    if ($(pageElements.get('rltw_prevBttn')).style.display == "none") $(pageElements.get('rltw_prevBttn')).appear();
}

/* ---Description---
* This is a helper function for the paginator that is attached to the
* onclick of the previous button. It handles getting the previous set of results
* as well as making sure the nav buttons are enabled/disabled depending
* on the remaining results
*/
function rltw_getPrev() {
    $(pageElements.get('rltw_clipResContainer')).innerHTML = "Loading...";

    $(pageElements.get('rltw_prevBttn')).stopObserving('click', rltw_getPrev);
    
    if (rltw_paginator.prev()) {
        $(pageElements.get('rltw_prevBttn')).observe('click', rltw_getPrev);
        if ($(pageElements.get('rltw_prevBttn')).style.display == "none") $(pageElements.get('rltw_prevBttn')).appear();
    }
    else {
        if ($(pageElements.get('rltw_prevBttn')).style.display != "none") $(pageElements.get('rltw_prevBttn')).fade();
    }
    $(pageElements.get('rltw_nextBttn')).observe('click', rltw_getNext);
    if ($(pageElements.get('rltw_nextBttn')).style.display == "none") $(pageElements.get('rltw_nextBttn')).appear();
}

/********************
*** Global Vars  ***
*******************/
//The maximum amount of results to return to the paginator for searchClips
var RLTW_MAX_RESULTS = 50;
//The amount of clips per page the paginator should show
var RLTW_CLIPS_PER_PAGE = 5;

//Declaration of the var used for the JS-API Paginator
var rltw_pageinator;
var rltw_clipLinkBase = 'http://test.redlasso.com/huckabee/index.htm?id=';

pageElements.set('rltw_clipResContainer', 'rl_tempWidget_clip_results');
pageElements.set('rltw_prevBttn', 'rl_tempWidget_clip_prev_button');
pageElements.set('rltw_nextBttn', 'rl_tempWidget_clip_next_button');