function createDropDown(){
	var list = document.getElementById("playlistDrop");
	var ays = list.childNodes;
	
	for(var i = 0; i < ays.length; i++){
		if(ays[i].tagName == "A"){
			ays[i].onclick = function(){
				loadNewPlaylist(this.id);
				closeTopDrop();
				return false;
			};
		}
	}
	
	var top = document.getElementById("playlistTop");
	top.onclick = clickTopDrop;
}

function clickTopDrop(){
	var list = document.getElementById("playlistDrop");
	var top;
	var nds;
	var i;
	if(list.style.display == "none" || list.style.display == ""){
		list.style.display = "block";
		top = document.getElementById("playlistTop");
		nds = top.childNodes;
		for(i = 0; i < nds.length; i++){
			if(nds[i].tagName == "A"){
				nds[i].style.backgroundPosition = "194px 2px";
			}
		}
	}
	else {
		list.style.display = "none";
		top = document.getElementById("playlistTop");
		nds = top.childNodes;
		for(i = 0; i < nds.length; i++){
			if(nds[i].tagName == "A"){
				nds[i].style.backgroundPosition = "194px -18px";
			}
		}
	}
}
function closeTopDrop(){
	var list = document.getElementById("playlistDrop");
	list.style.display = "none";
	var top = document.getElementById("playlistTop");
	var nds = top.childNodes;
	for(var i = 0; i < nds.length; i++){
		if(nds[i].tagName == "A"){
			nds[i].style.backgroundPosition = "194px -18px";
		}
	}
}

function loadNewPlaylist(playlistId){
	// reset the playlist to the first position
	var sc = $("div.playlist").scrollable();
	sc.begin();
	var html = $.ajax({
		  url: "mmVideoPlaylist.do",
		  cache: false,
		  data: "id=1&groupId=" + playlistId,
		  async: false
		 }).responseText;
	document.getElementById('interiorPlaylist').innerHTML = html;
	var selectedCategory = document.getElementById(playlistId);
	var top = document.getElementById("playlistTop");
	var nds = top.childNodes;
	for(var i = 0; i < nds.length; i++){
		if(nds[i].tagName == "A"){
			nds[i].innerHTML = selectedCategory.innerHTML;
		}
	}
	// make sure that if the playlist is less than the length of the area do not display the down arrow
	if(sc.getSize() <= 4){
		document.getElementById("down").className = "down disabled";
	}else{
		document.getElementById("down").className = "down";
	}
}