/* ---Description---
* This function is a helper function used to temporarily highlight a
* channel as the user roles over it
*/
function rlb_highlightChannel(element) {
    if (rlb_currentChan != element.id) {                                      
        element.style.backgroundColor = '#a6a6a6';
    }
}

function rlb_unhighlightChannel(element){
    element.style.backgroundColor = '#000';
}

function rlb_selectChannel(element) {
    if (!Object.isElement(element)) element = $(element);

    var channels = $('rl_banner_clip_channel_wrapper').childElements();
    channels.each(function(channel){
	channel.style.background = 'url("images/rl_banner/channel_star.png") no-repeat';
    });
    
    element.style.background = 'url("images/rl_banner/channel_star_selected.png") no-repeat';
    
    $('rl_banner_clipChannelTitle').innerHTML = element.innerHTML

    if (element.id.substring(0, 10) == 'rl_banner_'){
        rlb_currentChan = element.id.substring(10);
    }
    else {
        rlb_currentChan = element.id;
    }

    $("rl_banner_clip_search_field").value = "";
    rlb_doSearch();
}

function rlb_channelActive(){
    $('rl_banner_clip_search_wrapper').hide();
    $('rl_banner_clip_channel_wrapper').show(); 
    $('rl_banner_clip_nav_channel').style.color = '#961c17';
    $('rl_banner_clip_nav_search').style.color = '#a6a6a6';
}

function rlb_searchActive(){
    $('rl_banner_clip_search_wrapper').show();
    $('rl_banner_clip_channel_wrapper').hide();
    $('rl_banner_clip_nav_search').style.color = '#961c17';
    $('rl_banner_clip_nav_channel').style.color = '#a6a6a6';
}

/* ---Description---
* The selectClip function is used as the onclick function for
* the clips in this example. 
* This just opens a new window with a link to the clip
* ---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 rlb_selectClip(resourceId, element) {
    window.open(rlb_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 rlb_searchClips(elementId, term, cat, limit) {
    var channel = (rlb_currentChan == "all") ? "" : rlb_currentChan;
    api.Clip.searchClipsWithFilter(term, cat, PARTNER_GUID, RLB_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.
            rlb_paginator = new RedLasso.Util.Paginator(data, api, rlb_buildClips, limit);

            //Below is used to handle the display of the nav buttons for the paginator
            if (data.length <= RLB_CLIPS_PER_PAGE) {
                $(pageElements.get('rlb_prevBttn')).fade();
                $(pageElements.get('rlb_nextBttn')).fade();
            }
            else {
                $(pageElements.get('rlb_prevBttn')).fade();
                $(pageElements.get('rlb_nextBttn')).appear();
            }

            //if (initialPlay) {
            //    rlb_selectClip(data[0]);
            //}
        }
        else {
            $(elementId).innerHTML = "<i>No results.</i>";
            $(pageElements.get('rlb_prevBttn')).fade();
            $(pageElements.get('rlb_nextBttn')).fade();
        }
    });
}

/* ---Description---
* The doSearch function is a helper function for searchClips
* that grabs the user's selected category and search query
* from the HTML elements
*/
function rlb_doSearch() {
    var term = $F(pageElements.get('rlb_searchField'));
    var cat = "ALL"; //$F("clipCategory");
    rlb_searchClips(pageElements.get('rlb_clipResContainer'), term, cat, RLB_CLIPS_PER_PAGE);
    Effect.Pulsate(pageElements.get('rlb_searchButton'), { from: 0.4, pulses: 2 });
}

/* ---Description---
* checkSearch is a helper function for doSearch that checks
* to see if the Enter key has been pressed in a given element
* allowing the user to skip the step of clicking the Search button.
* In this example, the checkSearch function is applied to the onkeyup
* of the filterTerms input box.
* ---Parameters---
* element - The element to check to see if the key has been pressed in
* event - The event that has occured
*/
function rlb_checkSearch(element, event) {   //If the enter key has been pressed, do the search
    if (event.keyCode == 13) doSearch();
}

/* ---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 rlb_buildClips(data, elementID, opt_fn) {
    if (!elementID) elementID = pageElements.get('rlb_clipResContainer');
    $(elementID).innerHTML = "";
    var idSuffix = '_rlbdiv';

    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.style.display = 'none';
	newEl.observe('click', function(){
	    
	    rlb_selectClip(this.id.substring(0, this.id.lastIndexOf('_')), this);
	    Effect.Pulsate(this, {pulses:1,from:0.3,duration:1.0});
	});

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

	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 rlb_getNext() {
    $(pageElements.get('rlb_clipResContainer')).innerHTML = "Loading...";
    if (rlb_paginator.next()) {
        $(pageElements.get('rlb_nextBttn')).observe('click', rlb_getNext);
        $(pageElements.get('rlb_nextBttn')).appear();
    }
    else {
        $(pageElements.get('rlb_nextBttn')).stopObserving('click', rlb_getNext);
        $(pageElements.get('rlb_nextBttn')).fade();
    }
    $(pageElements.get('rlb_prevBttn')).observe('click', rlb_getPrev);
    $(pageElements.get('rlb_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 rlb_getPrev() {
    $(pageElements.get('rlb_clipResContainer')).innerHTML = "Loading...";
    if (rlb_paginator.prev()) {
        $(pageElements.get('rlb_prevBttn')).observe('click', rlb_getPrev);
        $(pageElements.get('rlb_prevBttn')).appear();
    }
    else {
        $(pageElements.get('rlb_prevBttn')).stopObserving('click', rlb_getPrev);
        $(pageElements.get('rlb_prevBttn')).fade();
    }
    $(pageElements.get('rlb_nextBttn')).observe('click', rlb_getNext);
    $(pageElements.get('rlb_nextBttn')).appear();
}

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

//The current channel selected to be searched on
var rlb_currentChan = "";
//Instantiation of the RedLasso JS-API

var rlb_paginator;
var rlb_clipLinkBase = 'http://radio.mikehuckabee.com/Article.asp?id=1351801&rlid=';

pageElements.set('rlb_searchButton', 'rl_banner_clip_search_button');
pageElements.set('rlb_searchField', 'rl_banner_clip_search_field');
pageElements.set('rlb_clipResContainer', 'rl_banner_clip_results');
pageElements.set('rlb_prevBttn', 'rl_banner_clip_prev_button');
pageElements.set('rlb_nextBttn', 'rl_banner_clip_next_button');