var MPlayerUtils = function()
{
	function _createResultObject(aAttr)
	{
		var attr = jQuery.extend({
			mediaId: '',
			fileType: 0,
			fileName: '',
			title: 'Untitled',
			subtitle: '',
			description: '',
			thumbnailFileName: '',
			height: 0,
			width: 0,
			duration: 0,
			durationText: '0:00',
			authorName: '',
			authorDescription: ''
		}, aAttr);
		
		var sTnUrl = "";
		var sTrimmedTitle = "";
		var sSpeaker = "";
		
		if (attr.title.length > 30)
		{
			sTrimmedTitle = attr.title.substring(0, 27) + '...';
		}
		else
		{
			sTrimmedTitle = attr.title;
		}
		
		/*if (attr.authorName.length > 0)
		{
			sSpeaker = attr.authorName + ' - ';
		}*/
		
		if (attr.thumbnailFileName.length > 0)
		{
			sTnUrl = MPlayer.avResultTnsUrl + attr.mediaId + '_' + attr.thumbnailFileName;
		}
		else
		{
			sTnUrl = MPlayer.avResultTnsUrl + 'defaultMedia.jpg';
		}
			
		return $('<div class="searchResultsItem"></div>')
			.append($('<div class="mediaDetails"></div>')
				.append($('<div class="mediaId"></div>').append(attr.mediaId))
				.append($('<div class="fileType"></div>').append(attr.fileType))
				.append($('<div class="fileName"></div>').append(attr.fileName))
				.append($('<div class="mediaTitle"></div>').append(attr.title))
				.append($('<div class="mediaSubtitle"></div>').append(attr.subtitle))
				.append($('<div class="mediaDescription"></div>').append(attr.description))
				.append($('<div class="thumbnailFileName"></div>').append(attr.thumbnailFileName))
				.append($('<div class="mediaHeight"></div>').append(attr.height))
				.append($('<div class="mediaWidth"></div>').append(attr.width))
				.append($('<div class="mediaDuration"></div>').append(attr.duration))
				.append($('<div class="mediaDurationText"></div>').append(attr.durationText))
				.append($('<div class="authorName"></div>').append(attr.authorName))
				.append($('<div class="authorDescription"></div>').append(attr.authorDescription))
			)
			.append($('<div class="resultsOverlay resultsOverlayOff"></div>')
				.append($('<img style="border: 0px;"></img>')
					.attr({src:'App_Themes/' + Globals.theme() + '/images/addToQueue.png'})
				)
			)
			.append($('<img class="resultsTn searchResultsHandle" alt=""></img>')
				.attr({src: sTnUrl})
			)
			.append($('<div class="videoInfo"></div>')
				.append($('<span class="videoTitle"></span>').html(sTrimmedTitle))
				.append($('<br />'))
				.append($('<span class="videoSpeaker"></span>').html(sSpeaker))
				.append($('<span class="videoTime"></span>').html(attr.durationText))
			)
			.hover(
				function () {
					$(this).find('.resultsOverlay')
						.removeClass('resultsOverlayOff')
						.addClass('resultsOverlayOn')
				},
				function () {
					$(this).find('.resultsOverlay')
						.removeClass('resultsOverlayOn')
						.addClass('resultsOverlayOff')
				}
			)
			.dblclick(
				function () {
					MPlayer.appendToPlaylist(this, 'nextUp');
				}
			);
		/*
		<div class="searchResultsItem">
			<div class="videoDetails">
				<div class="videoId"></div>
				<div class="videoTitle"></div>
				<div class="videoSubtitle"></div>
				<div class="videoSpeaker"></div>
				<div class="videoDuration"></div>
			</div>
            <a onmouseover="overlayOn('overlay1');"><img alt="" src="images/videoThumb.png" style="border: 0px;" /></a><br />
            <div class="addOverlay" id="Div1"><a onmouseout="overlayOff('overlay1');"><img alt="" src="images/addToQueue.png" style="border: 0px;" /></a></div>
            <div class="videoInfo">
            	<span class="videoTitle">Video Title</span> <span class="videoTime">3:15</span><br />
                <span class="videoSpeaker">Speaker Name</span>
            </div>
        </div>
        */
	}
	
	function _getResultDetails(sSelector)
	{
		/*
		.append($('<div class="mediaDetails"></div>')
				.append($('<div class="mediaId"></div>').append(attr.mediaId))
				.append($('<div class="fileType"></div>').append(attr.fileType))
				.append($('<div class="fileName"></div>').append(attr.fileName))
				.append($('<div class="mediaTitle"></div>').append(attr.title))
				.append($('<div class="mediaSubtitle"></div>').append(attr.subtitle))
				.append($('<div class="mediaDescription"></div>').append(attr.description))
				.append($('<div class="thumbnailFileName"></div>').append(attr.thumbnailFileName))
				.append($('<div class="mediaHeight"></div>').append(attr.height))
				.append($('<div class="mediaWidth"></div>').append(attr.width))
				.append($('<div class="mediaDuration"></div>').append(attr.duration))
				.append($('<div class="mediaDurationText"></div>').append(attr.durationText))
				.append($('<div class="authorName"></div>').append(attr.authorName))
				.append($('<div class="authorDescription"></div>').append(attr.authorDescription))
			)
			*/
		var res = {
			fromObject: 'result',
			mediaId: '',
			fileType: 0,
			fileName: '',
			title: 'Untitled',
			subtitle: '',
			description: '',
			thumbnailFileName: '',
			height: 0,
			width: 0,
			duration: 0,
			durationText: '0:00',
			authorName: '',
			authorDescription: ''
		};
		var ele = $(sSelector).find('.mediaDetails');
		
		res.mediaId = ele.find('.mediaId').text();
		res.fileType = ele.find('.fileType').text();
		res.fileName = ele.find('.fileName').text();
		res.title = ele.find('.mediaTitle').text();
		res.subtitle = ele.find('.mediaSubtitle').text();
		res.description = ele.find('.mediaDescription').text();
		res.thumbnailFileName = ele.find('.thumbnailFileName').text();
		res.height = ele.find('.mediaHeight').text();
		res.width = ele.find('.mediaWidth').text();
		res.duration = ele.find('.mediaDuration').text();
		res.durationText = ele.find('.mediaDurationText').text();
		res.authorName = ele.find('.authorName').text();
		res.authorDescription = ele.find('.authorDescription').text();
		
		return res;
	}
	
	function _createPlaylistObject(aAttr)
	{
		var attr = jQuery.extend({
			mediaId: '',
			fileType: 0,
			fileName: '',
			title: 'Untitled',
			subtitle: '',
			description: '',
			thumbnailFileName: '',
			height: 0,
			width: 0,
			duration: 0,
			durationText: '0:00',
			authorName: '',
			authorDescription: ''
		}, aAttr);
			
		var sTnUrl = "";
		var sTrimmedTitle = "";
		var sSpeaker = "";
		
		if (attr.title.length > 60)
		{
			sTrimmedTitle = attr.title.substring(0, 60) + '...';
		}
		else
		{
			sTrimmedTitle = attr.title;
		}
		
		if (attr.authorName.length > 0)
		{
			sSpeaker = attr.authorName + ' - ';
		}
		
		if (attr.thumbnailFileName.length > 0)
		{
			sTnUrl = MPlayer.avResultTnsUrl + attr.mediaId + '_' + attr.thumbnailFileName;
		}
		else
		{
			sTnUrl = MPlayer.avResultTnsUrl + 'defaultMedia.jpg';
		}
		
		return $('<div class="playlistItem"></div>')
			.append($('<div class="playlistDraggable"></div>')
				.append($('<div class="mediaDetails"></div>')
					.append($('<div class="mediaId"></div>').append(attr.mediaId))
					.append($('<div class="fileType"></div>').append(attr.fileType))
					.append($('<div class="fileName"></div>').append(attr.fileName))
					.append($('<div class="mediaTitle"></div>').append(attr.title))
					.append($('<div class="mediaSubtitle"></div>').append(attr.subtitle))
					.append($('<div class="mediaDescription"></div>').append(attr.description))
					.append($('<div class="thumbnailFileName"></div>').append(attr.thumbnailFileName))
					.append($('<div class="mediaHeight"></div>').append(attr.height))
					.append($('<div class="mediaWidth"></div>').append(attr.width))
					.append($('<div class="mediaDuration"></div>').append(attr.duration))
					.append($('<div class="mediaDurationText"></div>').append(attr.durationText))
					.append($('<div class="authorName"></div>').append(attr.authorName))
					.append($('<div class="authorDescription"></div>').append(attr.authorDescription))
				)
				.append($('<div class="playlistTnContainer"></div>')
					.append($('<img class="playlistTn" alt=""></img>')
						.attr({src: sTnUrl})
					)
				)
				.append($('<div class="playlistDesc"></div>')
					.append(sTrimmedTitle)
					.append('<br />')
					.append(sSpeaker + attr.durationText)
				)
			)
			.append($('<div class="playlistHandleContainer playlistHandle"></div>')
				.append($('<img class="playlistHandle" alt="" style="border: 0px;"></img>')
					.attr({src:'App_Themes/' + Globals.theme() + '/images/av_playlistHandle.png'})
				)
			);
			
		/*
		--- CREATED MARKUP ---
		<div class="playlistItem">
			<div class="playlistDraggable">
				<div class="videoDetails">
					<div class="videoId"></div>
					<div class="videoTitle"></div>
					<div class="videoSubtitle"></div>
					<div class="videoSpeaker"></div>
					<div class="videoDuration"></div>
				</div>
	        	<div class="playlistTn"><img alt="" src="images/av_playlistThumb.png" /></div>
	            <div class="playlistDesc">Video Title This is a Good One <br /> 3:15 <br /> Speaker Name</div>
            </div>
            <div class="playlistHandle"><img alt="" src="images/av_playlistHandle.png" /></div>
        </div>
        */
	}
	
	function _getPlaylistDetails(sSelector)
	{
		var res = {
			fromObject: 'result',
			mediaId: '',
			fileType: 0,
			fileName: '',
			title: 'Untitled',
			subtitle: '',
			description: '',
			thumbnailFileName: '',
			height: 0,
			width: 0,
			duration: 0,
			durationText: '0:00',
			authorName: '',
			authorDescription: ''
		};
		var ele = $(sSelector).find('.mediaDetails');
		
		res.mediaId = ele.find('.mediaId').text();
		res.fileType = ele.find('.fileType').text();
		res.fileName = ele.find('.fileName').text();
		res.title = ele.find('.mediaTitle').text();
		res.subtitle = ele.find('.mediaSubtitle').text();
		res.description = ele.find('.mediaDescription').text();
		res.thumbnailFileName = ele.find('.thumbnailFileName').text();
		res.height = ele.find('.mediaHeight').text();
		res.width = ele.find('.mediaWidth').text();
		res.duration = ele.find('.mediaDuration').text();
		res.durationText = ele.find('.mediaDurationText').text();
		res.authorName = ele.find('.authorName').text();
		res.authorDescription = ele.find('.authorDescription').text();
		
		return res;
	}
	
	function _getPlaylistDetailsJSON(sSelector)
	{
		var details = _getPlaylistDetails(sSelector);
		var str = '';
		str += '{\'__type\': \'ChurchesofChrist.Shared.MediaFile\', ';
		str += 'MediaId: ' + details.mediaId + ', ';
		str += 'FileType: ' + details.fileType + ', ';
		str += 'FileName: \'' + details.fileName + '\', ';
		str += 'Title: \'' + details.title + '\', ';
		str += 'Subtite: \'' + details.subtitle + '\', ';
		str += 'Description: \'' + details.description + '\', ';
		str += 'ThumbnailFileName: \'' + details.thumbnailFileName + '\', ';
		str += 'Height: ' + details.height + ', ';
		str += 'Width: ' + details.width + ', ';
		str += 'Duration: ' + details.duration + ', ';
		str += 'AuthorName: \'' + details.authorName + '\', ';
		str += 'AuthorDescription: \'' + details.authorDescription + '\' ';
		str += '}';
		return str;
	}
	
	return {
		/* RESULTS */
		createResultObject : function(aAttr)
		{
			return _createResultObject(aAttr);
		},
		getResultDetails : function(sSelected)
		{
			return _getResultDetails(sSelected);
		},
		/* PLAYLIST */
		createPlaylistObject : function(aAttr)
		{
			return _createPlaylistObject(aAttr);
		},
		getPlaylistDetails : function(sSelected)
		{
			return _getPlaylistDetails(sSelected);
		},
		getPlaylistDetailsJSON : function(sSelected)
		{
			return _getPlaylistDetailsJSON(sSelected);
		}
	}	
}();

var MPlayerOverlay = function()
{
	var _mdiv = ModalDiv;
	var _eleHeader = null;
	var _eleContent = null;
	var _eleFooter = null;
	
	var _timerMessage = null;
	
	function _bindKeypress()
	{
		$(document)
			.keypress(function(e)
			{
				switch(e.keyCode)
				{
					case 27: // Escape
					case 13: // Enter
						_hide();
						return false;
					default:
						return true;	
				}		
			});
	}
	
	function _unbindKeypress()
	{
		$(document).unbind('keypress');
	}
	
	function _create()
	{
		ModalDiv.create(100, 100, 850, 600);
		
		_eleHeader = $(_mdiv.getHeader());
		_eleContent = $(_mdiv.getContent());
		_eleFooter = $(_mdiv.getFooter());
		
		_eleHeader.empty();
		_eleContent.empty();
		_eleFooter.empty();
		
		_eleHeader
			.append(
				$('<div></div>')
					.append(
						$('<input type="button"></input>')
							.addClass('close')
							.click(function (e)
							{
								_hide();
							})
					)
					.css('float', 'right')	
			);			
	}
	
	function _show()
	{
		_bindKeypress();
		_mdiv.show();
	}
	
	function _hide()
	{
		_unbindKeypress();
		_mdiv.hide();
	}
	
	function _showMessage(sMessage)
	{
		clearTimeout(_timerMessage);
		_eleFooter.empty();
		_eleFooter.append(
			$('<div id="modalDivFooterMessage" style="display: none;"></div>')
				.append(sMessage)
				.fadeIn(500)
		);
		_timerMessage = setTimeout(function()
		{
			$('#modalDivFooterMessage').fadeOut(500);
			_eleFooter.empty();
		}, 3000);
	}
	
	function _getContent()
	{
		if (_eleContent == null)
		{
			_eleContent = (_mdiv.getContent());
		}
		return _eleContent;
	}
	
	return {
		create : _create,
		show : _show,
		hide : _hide,
		showMessage : _showMessage,
		getContent : _getContent
	}
}();

/*
var ModalDiv = function()
{
	function _create(w, h, x, y)
	{
		$('body')
			.append($('<div id="modalDialog" style="padding: 5px; border: 2px solid #aaaaaa; display: none; z-index: 1000; background-color: #ffffff; position: fixed; left: '+x+'px; top: '+y+'px; width: '+w+'px; height: '+h+'px;"></div>')
				.append('<div style="float: right; width: 10px; height: 10px; background-color: #ffffff;" onclick="ModalDiv.hide();">X</div>')
				.append('<div id="modalContent"></div>')
			);
	}
	function _destroy()
	{
		$('body').remove('#modalDialog');
	}
	function _show()
	{
		$('#modalDialog').show();
	}
	function _hide()
	{
		$('#modalDialog').hide();
	}
	function _getContent()
	{
		return $('#modalContent');
	}
	function _refresh()
	{
	}
	
	return {
		create : function (w, h, x, y)
		{
			return _create(w, h, x, y);
		},
		destroy : function()
		{
			return _destroy();
		},
		show : function()
		{
			return _show();
		},
		hide : function()
		{
			return _hide();
		},
		getHeader : function()
		{
		},
		getContent : function()
		{
			return _getContent();
		},
		getFooter : function()
		{
		},
		refresh : function()
		{
			return _refresh();
		}
	}
}();
*/