function RecipesPanels(xmlFile, panelName, wrapperName) {
    this.xmlFile = xmlFile;
    this.panelName = panelName;
    this.contentWrapperName = wrapperName;
    
	this.numberOfPanels = null;
    this.panelHTML = "";    

    //Use these arrays to store the thumbnail and title.
    this.thumbnails = new Array();
    this.titles = new Array();
	this.clipIds = new Array();
    this.channels = new Array();
	this.destinationURL = new Array();
}

var myPlaylistVideos = new RecipesPanels("","videosItem","videosContent");
var relatedVideos = new RecipesPanels("","videosItem","videosContent");
var searchVideos = new RecipesPanels("","videosItem","videosContent");

$(document).ready(function() {});

function vxClientInitialize()
{
	var vxFP = vxGetPlayer();
	vxFP.addEventListener("eAddedToCustomPlaylist", "onAddedToCustomPlaylist");
	vxFP.addEventListener("eRemoveFromCustomPlaylist", "onRemovedFromCustomPlaylist");
	vxFP.addEventListener("eCustomPlaylistLoaded", "onCustomPlaylistLoaded");
	//vxFP.addEventListener("eRelatedVideosLoaded", "onRelatedVideosLoaded"); //object.clips
	vxFP.addEventListener("eSearchComplete", "onSearchCompleted");
}

function addItem(clips, channel) {
    removeItem(clips);
    //alert("AddItem - clips: "+clips+" channel: "+channel);
	var e = {};
	e.clipId = clips;
	e.channelName = channel;
	vxDispatch("eAddToCustomPlaylist", e);
}

function removeItem(clipId)
{
    //clipId needs to be a string
	var e = {};
	e.clipId = clipId;
	vxDispatch("eRemoveFromCustomPlaylist", e);
}

function onCustomPlaylistLoaded(event){
	//console.log("onCustomPlaylistLoaded: "+event.clips.length);
	try{
		for(i=0;i<event.clips.length;i++){
			myPlaylistVideos.titles[i] = event.clips[i].title;
			myPlaylistVideos.channels[i]  = event.clips[i].originChannelName;
			myPlaylistVideos.clipIds[i] = event.clips[i].clipId;
			myPlaylistVideos.thumbnails[i] = event.clips[i].thumbnails[2].url;
			myPlaylistVideos.destinationURL[i] = "http://"+window.location.host+event.clips[i].destinationURL;
		}
		myPlaylistVideos.numberOfPanels = event.clips.length;
		createPlaylist(myPlaylistVideos);
	}
	catch(err){
		//alert("onCustomPlaylistLoaded - err: "+err);
	}
}

function createPlaylist(panelObject){
panelObject.panelHTML = "";

    try {
		//My Playlist HTML with new server data.
        for (i = 1; i <= panelObject.numberOfPanels; i++) {
			panelObject.panelHTML += '<div class="videosItem"><div class="' + panelObject.panelName + 'ThumnailWrapper"><img class="'+panelObject.panelName+'Thumbnail" alt="" src="'+panelObject.thumbnails[(i-1)]+'" /></div>'
			panelObject.panelHTML += '<div class="'+panelObject.panelName+'TitleText">'+panelObject.titles[(i-1)]+'</div>';
			//panelObject.panelHTML += '<div class="'+panelObject.panelName+'ViewsText"></div>';
			panelObject.panelHTML += '<div class="'+panelObject.panelName+'RatingsPanel"><img class="videosRatings" alt="Video rating" title="'+panelObject.titles[(i-1)]+'" src="/assets/images/playlist/ratings0.png" /></div>';
			panelObject.panelHTML += '<div class="videosSubItem"><img class="subItem'+i+'" src="/assets/images/playlist/subItem.png" alt="Remove from playlist" title="Remove from playlist"/></div>';
			panelObject.panelHTML += '</div>';
        }
        
        $("#Playlist ." + panelObject.contentWrapperName).empty();
        $("#Playlist ." + panelObject.contentWrapperName).prepend(panelObject.panelHTML);
        $("#Playlist ." + panelObject.contentWrapperName).jScrollPane({ showArrows: true, scrollbarWidth: 16, reinitialiseOnImageLoad: true, scrollbarMargin: 4, arrowSize: 16, dragMinHeight: 80, dragMaxHeight: 80, scrollbarOnLeft: true });

        AddWidgetEvents("#Playlist", MyPlaylistPanelControls, myPlaylistVideos);
    }
    catch (err) {
	    //alert("createPlaylist - err: "+err);
	}	
}

function createSearch(panelObject){
	panelObject.panelHTML  = "";
	
    try {
		if($("#Search").css("display") == "none"){
			$("#Search").fadeIn("slow");			
		}
		
		$(".searchData").val(tmpSearchData);
		//Search Videos HTML with new server data.
        for (i = 1; i <= panelObject.numberOfPanels; i++) {			            
            panelObject.panelHTML += '<div class="videosItem"><div class="' + panelObject.panelName + 'ThumnailWrapper"><img class="' + panelObject.panelName + 'Thumbnail" alt="" src="' + panelObject.thumbnails[(i - 1)] + '" /></div>'
            panelObject.panelHTML += '<div class="' + panelObject.panelName + 'TitleText">' + panelObject.titles[(i - 1)] + '</div>';
            /*panelObject.panelHTML += '<div class="' + panelObject.panelName + 'ViewsText"></div>';*/
            panelObject.panelHTML += '<div class="' + panelObject.panelName + 'RatingsPanel"><img class="videosRatings" alt="Video rating" title="' + panelObject.titles[(i - 1)] + '" src="/assets/images/playlist/ratings0.png" /></div>';
            panelObject.panelHTML += '<div class="addPlaylistButton"><img class="addItem' + i + '" src="/assets/images/playlist/addItem.png" alt="Add to my playlist" title="Add to my playlist"/></div>';
            panelObject.panelHTML += '</div>';
        }        

        $("#Search ." + panelObject.contentWrapperName).empty();
        $("#Search ." + panelObject.contentWrapperName).prepend(panelObject.panelHTML);
        $("#Search ." + panelObject.contentWrapperName).jScrollPane({ showArrows: true, scrollbarWidth: 16, reinitialiseOnImageLoad: true, scrollbarMargin: 4, arrowSize: 16, dragMinHeight: 16, dragMaxHeight: 80, scrollbarOnLeft: true });

        AddWidgetEvents("#Search", SearchPanelControls, searchVideos);
    }
    catch (err) {
	}	
}

function onAddedToCustomPlaylist(event)
{
}

function onRemovedFromCustomPlaylist(event)
{
}

function vxDispatch(sEvent, oParams)
{
	vxGetPlayer().dispatchEvent(sEvent, oParams); 
}

function vxTrace(msg) //Requires: <textarea id="vxOutput" rows="15" cols="70"></textarea> to be defined in the page
{
	//console.log("vxTrace: "+msg);
}

function stripPlaylistLoaded() //Called from the strip when we're reading to subscribe to events.
{
	var strip = vxGetStrip();
	strip.addEventListener("eSearchComplete", "onSearchCompleted");
}

function vxGetStrip()
{
	return document.getElementById("vxSearchStrip");
}

function onSearchCompleted(event)
{
	if(event.searchType != "search")return;

	if(event.clips.length < 1){
		
		if($("#SearchVideosWrapper").css("display") == "none"){
			$("#SearchVideosWrapper").fadeIn("slow");			
		}
		$(".searchData").val(tmpSearchData);
		searchVideos.panelHTML = "";
		searchVideos.panelHTML += '<div id="' + searchVideos.panelName + '' + i + '" class="SearchVideosItem"></div>'
		searchVideos.panelHTML += '<div class="'+searchVideos.panelName+'TitleResultsText">No search results were found...</div>';
		searchVideos.panelHTML += '<div class="'+searchVideos.panelName+'ViewsText"></div>';
		searchVideos.panelHTML += '<div class="'+searchVideos.panelName+'RatingsText"></div>';
		searchVideos.panelHTML += '</div>';
		
		$("#SearchVideosContent").empty();
        $("#" + searchVideos.contentWrapperName).prepend(searchVideos.panelHTML);
		$("#" + searchVideos.contentWrapperName).jScrollPane({showArrows:true,scrollbarWidth: 16,reinitialiseOnImageLoad: true, scrollbarMargin:4, arrowSize: 16, dragMinHeight:16, dragMaxHeight :80, scrollbarOnLeft: true});			
		AddSearchClickEvents();
		return;
	}	

	try{
		for(i=0;i<event.clips.length;i++){
			searchVideos.titles[i] = event.clips[i].title;
			searchVideos.channels[i]  = event.clips[i].originChannelName;
			searchVideos.clipIds[i] = event.clips[i].clipId;
			searchVideos.thumbnails[i] = event.clips[i].thumbnails[2].url;
			searchVideos.destinationURL[i] = "http://"+window.location.host+event.clips[i].destinationURL;
		}
		searchVideos.numberOfPanels = event.clips.length;
		createSearch(searchVideos);
		$(".searchData").val(tmpSearchData);
	}
	catch(err){
	//alert("onSearchComplete - err: "+err);
	}
}

function onSearchFailed(event)
{
}

function SubmitSearch(){
	// Perform search
	var searchEvent   = new Object();
	searchEvent.searchTerm = $(".searchData").val();
	searchEvent.searchType = "search";
	vxDispatch("eSearchExecute", searchEvent);
}

//Debug test loop
/*for(var p in event.clips[0])
{
	console.log("onCustomPlaylistLoaded: " + p + ": " + event.clips[0][p]);
}*/

function onSearchComplete(event) {
    //alert("onSearchComplete()");
    $("#SearchPlaylistWrapper").css("height", "338px");
}

function onSearchFailed(event) {
    alert("Search results has failed to process...  Please try again.");
}