var xmlRequest;
var wsUrl = "/LiveScoresService.asmx";
var currentSportID = 1;
var currentLeagueID = 1;
var currentTeamID = 0;
var maxResults = 10;
var totalResults;
var currentPage = 1;
var totalPages;
var sort = "relevance";
var cookieHours = 24 * 7;
var videos;
var main;
var details;
var intervalID;

function Video(videoNode)
{
	this.Published = videoNode.getElementsByTagName("Published")[0].firstChild.nodeValue;
	this.Title = videoNode.getElementsByTagName("Title")[0].firstChild.nodeValue;
	this.Content = videoNode.getElementsByTagName("Content")[0].firstChild.nodeValue;
	this.Author = videoNode.getElementsByTagName("Author")[0].firstChild.nodeValue;
	this.Duration = parseInt(videoNode.getElementsByTagName("Duration")[0].firstChild.nodeValue);
	this.VideoUrl = videoNode.getElementsByTagName("VideoUrl")[0].firstChild.nodeValue;
	this.ImageUrl = videoNode.getElementsByTagName("ImageUrl")[0].firstChild.nodeValue;
	var nodes = videoNode.getElementsByTagName("ViewCount");
	if (nodes.length == 1) 
		this.ViewCount = parseInt(nodes[0].firstChild.nodeValue);
	else
		this.ViewCount = 0;
	nodes = videoNode.getElementsByTagName("Rating");
	if (nodes.length == 1)
		this.Rating = parseFloat(nodes[0].firstChild.nodeValue);
	else
		this.Rating = 0;
}

function pageLoad()
{
  xmlRequest = new XMLHttpRequest();
	xmlRequest.onreadystatechange = xmlStateChange;
	main = document.getElementById("main");
	details = document.getElementById("details");
	loadSettings();
	getVideos();
	updateLayout();
}

function updateLayout()
{	
	var orient;
  if (window.orientation == 0 || window.orientation == 180)
  {
    orient = "portrait";
  }
  else
  {
    orient = "landscape";
  }
	document.body.setAttribute("orient", orient);
	updateVideoDisplay();
	setTimeout(hideAddressBar, 100);
}

function loadSettings()
{
	var cookie = readCookie("VideoSportID");
	if (cookie != null) currentSportID = parseInt(cookie);
	cookie = readCookie("VideoTeamID");
	if (cookie != null) currentTeamID = parseInt(cookie);
	cookie = readCookie("VideoTeamName");
	if (cookie != null) document.getElementById("teamName").innerText = cookie;
	cookie = readCookie("VideoSort");
	if (cookie != null)
	{
		var sortSelect = document.getElementById("sortSelect");
		for (var i = 0; i < sortSelect.options.length; i++)
		{
			if (sortSelect.options[i].value == cookie)
			{
				sortSelect.options[i].selected = true;
				sort = cookie;
				break;
			}
		}
	}
}

function showSelectTeam()
{
	document.getElementById("spinner").style.top = "120px";
	document.getElementById("ad").style.display = "none";
	document.getElementById("backgroundMask").style.height = document.height + "px";
	document.getElementById("backgroundMask").style.display = "block";
	document.getElementById("selectTeam").style.display = "block";
}

function hideSelectTeam()
{
	document.getElementById("spinner").style.top = null;
	document.getElementById("ad").style.display = "block";
  document.getElementById("backgroundMask").style.display = "none";
	document.getElementById("selectTeam").style.display = "none";
}

function showSportSelect()
{
	removeTeamSelectNodes();
	document.getElementById("sportSelect").style.display = "block";
	document.getElementById("teamSelect").style.display = "none";
}

function bgMaskClick()
{
	if (document.getElementById("selectTeam").style.display == "block")
		hideSelectTeam();
}

function toggleInfoDisplay()
{
	if (infoOn)
	{
		document.getElementById("subHeader").style.display = "table";
		document.getElementById("main").style.display = "block";
		document.getElementById("ad").style.display = "block";
		document.getElementById("info").style.display = "none";
		event.srcElement.className = "right grayButton";
		infoOn = false;
	}
	else
	{
		document.getElementById("subHeader").style.display = "none";
		document.getElementById("main").style.display = "none";
		//document.getElementById("ad").style.display = "none";
		document.getElementById("info").style.display = "block";
		event.srcElement.className = "right buttonBright";
		infoOn = true;
	}
}

function selectSport(sportID)
{
	currentSportID = sportID;
	document.getElementById("sportSelect").style.display = "none";
	getTeams();
}

function changeLeague(leagueID)
{
	if (currentLeagueID != leagueID)
	{
		removeTeamSelectNodes();
		currentLeagueID = leagueID;
		getTeams();
	}
}

function getTeams()
{
	showBlackSpinner();
	xmlRequest.open("POST", wsUrl + "/GetTeams");
	xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xmlRequest.send("sport=" + currentSportID + "&leagueID=" + currentLeagueID);
}

function selectTeam(img)
{
	currentTeamID = img.getAttribute("teamID");
	writeCookie("VideoSportID", currentSportID, cookieHours);
	writeCookie("VideoTeamID", currentTeamID, cookieHours);
	writeCookie("VideoTeamName", img.teamName, cookieHours);
	document.getElementById("teamName").innerText = img.teamName;
	hideSelectTeam();
	removeVideos();
	getVideos();
}

function changeSort()
{
	sort = event.srcElement.value;
	event.srcElement.blur();
	writeCookie("VideoSort", sort, cookieHours);
	currentPage = 1;
	removeVideos();
	getVideos();
}

function changePage(increment)
{
	if (increment == -1 && currentPage > 1)
	{
		currentPage--;
		removeVideos();
		getVideos();
	}
	else if (increment == 1 && currentPage < totalPages)
	{
		currentPage++;
		removeVideos();
		getVideos();
	}
}

function getVideos()
{
	var startIndex = (currentPage - 1) * maxResults + 1;
	showBlackSpinner();
	document.getElementById("footer").style.visibility = "hidden";
	
	xmlRequest.open("POST", wsUrl + "/GetVideos");
  xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xmlRequest.send("sportID=" + currentSportID + "&teamID=" + currentTeamID + "&startIndex=" + startIndex + "&maxResults=" + maxResults + "&sort=" + sort);
}

function displayTeams(doc)
{
	var img;
	var divAll = document.getElementById("divAllVideos");
	
	document.getElementById("teamSelect").style.display = "block";
	var divisionNodes = doc.getElementsByTagName("Division");
	
	var tbl = document.createElement("table");
	tbl.className = "leagues";
	var tr = tbl.insertRow(-1);
	tr.insertCell(-1);
	tr.insertCell(-1);
	
	img = new Image();
	if (currentLeagueID == 1) img.className = "selected";
	img.onclick = function () { changeLeague(1); };
	tr.cells[0].appendChild(img);
	img = new Image();
	if (currentLeagueID == 2) img.className = "selected";
	img.onclick = function () { changeLeague(2); };
	tr.cells[1].appendChild(img);
			
	switch (currentSportID)
	{
	  case 1:
	    tr.cells[0].getElementsByTagName("img")[0].src = "/Images/Logos/MLB/AL.gif";
			tr.cells[1].getElementsByTagName("img")[0].src = "/Images/Logos/MLB/NL.gif";
			divAll.innerText = "All MLB Videos";
			divAll.teamName = "MLB";
	    break;
		case 2:
	    tr.cells[0].getElementsByTagName("img")[0].src = "/Images/Logos/NFL/AFCLogo.png";
			tr.cells[1].getElementsByTagName("img")[0].src = "/Images/Logos/NFL/NFCLogo.png";
			divAll.innerText = "All NFL Videos";
			divAll.teamName = "NFL";
	    break;  
	  case 4:
	    tr.cells[0].getElementsByTagName("img")[0].src = "/Images/Logos/NBA/Eastern.gif";
	    tr.cells[1].getElementsByTagName("img")[0].src = "/Images/Logos/NBA/Western.gif";
			divAll.innerText = "All NBA Videos";
			divAll.teamName = "NBA";
	    break;
		case 6:
			tr.cells[0].getElementsByTagName("img")[0].src = "/Images/Logos/NHL/Eastern.gif";
	    tr.cells[1].getElementsByTagName("img")[0].src = "/Images/Logos/NHL/Western.gif";
			divAll.innerText = "All NHL Videos";
			divAll.teamName = "NHL";
			break;
	}
	
	document.getElementById("teamSelect").appendChild(tbl);
	
	tbl = document.createElement("table");
	tbl.className = "teams";
	tbl.insertRow(-1);
	tbl.insertRow(-1);
	for (var i = 0; i < divisionNodes.length; i++)
	{
	  var td = tbl.rows[0].insertCell(-1);
	  td.innerText = divisionNodes[i].getAttribute("Name");
		if (currentSportID == 2) 
			td.style.width = "25%";
		else
			td.style.width = "33%";
	  td = tbl.rows[1].insertCell(-1);
	  var teamNodes = divisionNodes[i].getElementsByTagName("Team");
	  for (var j = 0; j < teamNodes.length; j++)
	  {
	    img = new Image();
	    switch (currentSportID)
	    {
	      case 1:
	        img.src = "/Images/Logos/MLB/" + teamNodes[j].getAttribute("Abbreviation") + ".gif";
	        break;
				case 2:
					img.src = "/Images/Logos/NFL/" + teamNodes[j].getAttribute("Abbreviation") + ".gif";
	        break;
				case 4:
					img.src = "/Images/Logos/NBA/" + teamNodes[j].getAttribute("Abbreviation") + ".jpg";
					break;
				case 6:
					img.src = "/Images/Logos/NHL/" + teamNodes[j].getAttribute("Abbreviation") + ".gif";
	        break;
	    }
	    teamID = teamNodes[j].getAttribute("TeamID");
	    img.setAttribute("teamID", teamID);
			img.teamName = teamNodes[j].getAttribute("Name");
	    img.onclick = function() { selectTeam(this); };
	    
	    td.appendChild(img);
	    var br = document.createElement("br");
	    td.appendChild(br);
	  }
	}
	document.getElementById("teamSelect").appendChild(tbl);
}

function loadVideos(doc)
{
	totalResults = doc.getAttribute("TotalResults");
	totalPages = Math.ceil(totalResults / maxResults);
	var tbl = document.getElementById("pageHeader");
	tbl.rows[0].cells[0].innerHTML = "<b>" + totalResults + "</b> matching videos";
	tbl.rows[0].cells[1].getElementsByTagName("span")[0].innerHTML = "Page <b>" + currentPage + "</b> of <b>" + totalPages + "</b>";
	
	tbl = document.getElementById("footer");
	tbl.rows[0].cells[0].getElementsByTagName("span")[0].innerHTML = "Page <b>" + currentPage + "</b> of <b>" + totalPages + "</b>";
	
	videos = new Array();
	var videoNodes = doc.getElementsByTagName("Video");
	for (var i = 0; i < videoNodes.length; i++)
	{
		videos[i] = new Video(videoNodes[i]);
	}
}

function displayVideos()
{
	var landscape = document.body.getAttribute("orient") == "landscape";
	var tbl = document.getElementById("tblMain");
	for (var i = 0; i < videos.length; i++)
	{
		var tr = tbl.insertRow(-1);
		var td = tr.insertCell(-1);
		td.className = "thumb";
		var a = document.createElement("a");
		a.href = videos[i].VideoUrl;
		var img = new Image();
		img.src = videos[i].ImageUrl;
		a.appendChild(img);
		td.appendChild(a);
		td = tr.insertCell(-1);
		td.className = "info";
		var div = document.createElement("div");
		div.className = "info";
		var tblSub = document.createElement("table");
		var trSub = tblSub.insertRow(-1);
		var tdSub = trSub.insertCell(-1);
		tdSub.className = "title";
		tdSub.colSpan = "2";
		var a = document.createElement("a");
		if (landscape)
		{
			a.innerText = videos[i].Title;
		}
		else
		{
			if (videos[i].Title.length > 38)
				a.innerText = videos[i].Title.substring(0, 35) + "...";
			else
				a.innerText = videos[i].Title;
		}
		a.onclick = showDetails;
		tdSub.appendChild(a);
		trSub = tblSub.insertRow(-1);
		tdSub = trSub.insertCell(-1);
		tdSub.colSpan = "2";
		tdSub.innerText = "added " + videos[i].Published;
		trSub = tblSub.insertRow(-1);
		tdSub = trSub.insertCell(-1);
		tdSub.style.width = "70px";
		tdSub.noWrap = true;
		var rating = Math.round(videos[i].Rating);
		for (var j = 1; j <= 5; j++)
		{
			img = new Image();
			if (rating >= j)
				img.src = "Images/RatingStar.png";
			else
				img.src = "Images/RatingNoStar.png";
			tdSub.appendChild(img);
		}
		tdSub = trSub.insertCell(-1);
		tdSub.noWrap = true;
		tdSub.innerText = videos[i].ViewCount + " views";
		trSub = tblSub.insertRow(-1);
		tdSub = trSub.insertCell(-1);
		tdSub.colSpan = "2";
		var span = document.createElement("span");
		span.className = "time";
		var minutes = Math.floor(videos[i].Duration / 60);
		var seconds = videos[i].Duration - minutes * 60;
		if (seconds < 10) seconds = 0 + "" + seconds;
		span.innerText = minutes + ":" + seconds;
		tdSub.appendChild(span);
		span = document.createElement("span");
		span.className = "user";
		if (landscape)
		{
			span.innerText = videos[i].Author;
		}
		else
		{
			if (videos[i].Author.length > 18)
				span.innerText = videos[i].Author.substring(0, 15) + "...";
			else
				span.innerText = videos[i].Author;
		}
		tdSub.appendChild(span);
		div.appendChild(tblSub);
		td.appendChild(div);
		div = document.createElement("div");
		div.className = "button";
		img = new Image();
		img.src = "Images/RoundArrow.png";
		img.onclick = showDetails;
		div.appendChild(img);
		td.appendChild(div);
	}
	
	document.getElementById("footer").style.visibility = "visible";
}

function updateVideoDisplay()
{
	var landscape = document.body.getAttribute("orient") == "landscape";
	var tbl = document.getElementById("tblMain");
	for (var i = 0; i < tbl.rows.length; i++)
	{
		var video = videos[i];
		if (video != null)
		{
			var tblSub = tbl.rows[i].cells[1].getElementsByTagName("table")[0]
			var a = tblSub.rows[0].cells[0].getElementsByTagName("a")[0];
			if (landscape)
			{
				a.innerText = video.Title;
			}
			else
			{
				if (video.Title.length > 38)
					a.innerText = video.Title.substring(0, 35) + "...";
				else
					a.innerText = video.Title;
			}
			var span = tblSub.rows[3].cells[0].getElementsByTagName("span")[1];
			if (landscape)
			{
				span.innerText = video.Author;
			}
			else
			{
				if (video.Author.length > 18)
					span.innerText = video.Author.substring(0, 15) + "...";
				else
					span.innerText = video.Author;
			}
		}
	}
}

function showDetails()
{
	var element = event.srcElement;
	var tr = element.parentElement.parentElement.parentElement;
	if (tr.rowIndex == undefined) tr = tr.parentElement.parentElement.parentElement.parentElement;
	var video = videos[tr.rowIndex];
	
	var tbl = document.getElementById("tblDetails");
	var a = tbl.rows[0].cells[0].getElementsByTagName("a")[0];
	a.href = video.VideoUrl;
	var img = a.childNodes[1];
	img.src = video.ImageUrl;
	
	var tblSub = tbl.rows[0].cells[1].getElementsByTagName("table")[0];
	a = tblSub.rows[0].cells[0].childNodes[0];
	a.innerText = video.Title;
	a.href = video.VideoUrl;
	
	var rating = Math.round(video.Rating);
	img = tblSub.rows[1].cells[0].getElementsByTagName("img");
	for (var i = 1; i <= 5; i++)
	{
	  if (rating >= i)
	    img[i-1].src = "Images/RatingStar.png";
	  else
	    img[i-1].src = "Images/RatingNoStar.png";
	}
	tblSub.rows[1].cells[1].innerText = "(" + video.Rating.toFixed(2) + " rating)";
	tblSub.rows[2].cells[0].innerText = video.ViewCount + " views";
	
	var minutes = Math.floor(video.Duration / 60);
	var seconds = video.Duration - minutes * 60;
	if (seconds < 10) seconds = 0 + "" + seconds;
	tbl.rows[3].cells[1].innerText = minutes + ":" + seconds;
	
	tbl.rows[4].cells[1].innerText = video.Published;
	tbl.rows[2].cells[1].innerText = video.Author;
	tbl.rows[5].cells[1].innerText = video.Content;
	
	main.style.opacity = 1;
	details.style.opacity = 0;
	details.style.display = "block";
	moveDetailsIn();
//	document.getElementById("details").style.display = "block";
}

function hideDetails()
{
  main.style.display = "block";
  moveDetailsOut();
}

function moveDetailsIn()
{
	var change = 0.25;
	main.style.opacity = parseFloat(main.style.opacity) - change;
	details.style.opacity = parseFloat(details.style.opacity) + change;
	if (main.style.opacity > 0)
		setTimeout(moveDetailsIn, 0);
	else
	{
		main.style.display = "none";
	  document.getElementById("tdBack").style.display = "table-cell";
	  document.getElementById("tdTeam").style.display = "none";
	  document.getElementById("tdEdit").style.display = "none";
		hideAddressBar();
	}
}

function moveDetailsOut()
{
  var change = 0.25;
	main.style.opacity = parseFloat(main.style.opacity) + change;
	details.style.opacity = parseFloat(details.style.opacity) - change;
	if (details.style.opacity > 0)
	  setTimeout(moveDetailsOut, 0);
	else
	{
	  details.style.display = "none";
	  document.getElementById("tdBack").style.display = "none";
	  document.getElementById("tdTeam").style.display = "table-cell";
	  document.getElementById("tdEdit").style.display = "table-cell";
	}
}

function removeVideos()
{
	var tbl = document.getElementById("tblMain");
	while (tbl.rows.length > 0)
	{
		tbl.deleteRow(0);
	}
}

function removeTeamSelectNodes()
{
	var div = document.getElementById("teamSelect");
	while (div.childNodes.length > 5)
	{
		var child = div.childNodes[5];
		removeChildNodes(child);
		div.removeChild(child);
		child = null;
	}
}

function xmlStateChange()
{
	if (xmlRequest.readyState == 4)
	{
		var doc = xmlRequest.responseXML.documentElement;
	  if (doc.tagName == "Videos")
	  {
	    loadVideos(doc);
			displayVideos();
			hideAddressBar();
	  }
		else if (doc.tagName == "ArrayOfDivision")
		{
			displayTeams(doc);
		}
		hideSpinner();
  }
}