/**
	@namespace
	@description All JS required for Switch
*/

var bbcSwitch = function(){
	
	/**
	 * @memberOf bbcSwitch
	 * @function
	 * @param {node} listid 
	 * @description Gets all links in a given list.
	*/
	
	var getLinks = function(listid) {
		var promobox = document.getElementById(listid);
		var links = promobox.getElementsByTagName("a");
		return links;
	}
	
	/**
	 * @memberOf bbcSwitch
	 * @function
	 * @param {node} tabs List with id of tabs
	 * @param {nodeList} lists to be tabbed between
	 * @description Takes the lis of #tabs and matches them to the lists passed in. Then when one of the tabs is clicked the appropriate list is displayed and the others hidden.
	*/
	
	var tabswitcher = function(tabs,lists) {
		var tabsli = tabs.getElementsByTagName("li");	
		var listslength = lists.length;
		var i=0;
		var tabslilength = tabsli.length;
		for(var i=0;i<tabslilength;i++){
			for(var j=0;j<listslength;j++){
				if(tabsli[i].className == lists[j].id){
					// If the className of the tab is the same as the id of one of the schedule lists, stick it in a property of the tab.
					tabsli[i]._list = lists[j]; 
				}
			}
		}
		i=0; //reset counter to 0
		for(;i<tabsli.length;i++){
			tabsli[i].onclick = function(){
				this.parentNode.className = this._list.id + "selected";
				var j=0;
				for (;j<listslength;j++){
					if(lists[j].id != "tabs"){
						lists[j].style.display = "none";
					}
				}
				this._list.style.display = "block"
			}
		}
	}
	
	/**
	 * @memberOf bbcSwitch
	 * @function
	 * @param {nodeList} collection
	 * @description Converts a nodeList to an array
	*/
	
	var collectionToArray = function(collection){ 
		var ary = []; 
		len = collection.length;
		for(var i=0; i<len; i++){ 
			ary.push(collection[i]); 
		} 
		return ary; 
	} 
	
	/**
	 * @memberOf bbcSwitch
	 * @function
	 * @param {node} Reference to single link 
	 * @description Gets the innerHTML of a div contained in a link and returns it
	*/
	
	var getDivInnerHtml = function(linkRef) {
		var divs = linkRef.getElementsByTagName("div");
		var inner = divs[0].innerHTML;
		return inner;
	}
	
	/**
	 * @memberOf bbcSwitch
	 * @function
	 * @param {node} Reference to single link 
	 * @description Sets the innerHTML of a div contained in a link
	*/
	
	var setDivInnerHtml = function(linkRef) {	
			var divs = linkRef.getElementsByTagName("div");
			divs[0].innerHTML = linkRef.oldInner;
	}
	
	return {
		
	/**
	 * @memberOf bbcSwitch
	 * @function
	 * @description Sets up the schedule by hiding the headings, running the tabswitcher, adding a class to the ul to give the changing tabs and finally showing #tabs
	*/
	
		scheduleSetUp: function() {
			var schedule = document.getElementById("schedule");
			var headings = schedule.getElementsByTagName("h3");
			while(headings.length != 0){
				var parent = headings[0].parentNode;
				parent.removeChild(headings[0]);
			}
			var lists = schedule.getElementsByTagName("ul");
			var listslength = lists.length;
			var i=0;
			for(;i<listslength;i++){
				if(lists[i].id == "tabs"){
					var tabs = lists[i];
					break;
				}
			}
			tabswitcher(tabs,lists);
			var listsarray = collectionToArray(lists);
			i=0; //reset counter to 0
			var listsarraylength = listsarray.length;
			for(;i<listsarraylength;i++){
				if(listsarray[i].id == "tabs"){
					listsarray.splice(i,1);
					break;
				}
			}
			i=0; //reset counter
			listsarraylength = listsarray.length;
			for(;i<listsarraylength;i++){
				listsarray[i].className = listsarray[i].className + " activated";
				if(i>0){
					listsarray[i].style.display = "none";
				}
			} 
			tabs.className = listsarray[0].id + "selected";
			tabs.style.display = "block";
			
		},
		
		
	/**
	 * @memberOf bbcSwitch
	 * @function
	 * @param {string} id of list or surrounding div
	 * @description Adds class of hover to lis on mouse over and removes it on mouseout
	*/
		liHover: function (Id) {
			var more = document.getElementById(Id);
			var lis = more.getElementsByTagName("li");
			var pattern = /\s?hover\s?/;
			for (var i=0;i<lis.length;i++){
				lis[i].onmouseover = function(){
					this.className = this.className + " hover";
				}
				lis[i].onmouseout = function(){
					this.className = this.className.replace(/\s?hover\s?/,"");
				}
			}
		},
		
		
	/**
	 * @memberOf bbcSwitch
	 * @function
	 * @param {node} listid 
	 * @description Adds class of hover to lis on mouse over
	*/

		promoSwap: function (listId) {
			var links = getLinks(listId);
			links[0].className = "hover";
			for (var c=0;c<links.length;c++) {
				links[c].onmouseover = function(){
					for(var d=0; d<links.length;d++){
						links[d].className = links[d].className.replace(/\s?hover\s?/,"");
					}
					this.className = this.className + " hover";	
				}
			}
		},
		
	
	/**
	 * @memberOf bbcSwitch
	 * @function
	 * @param {node} listid 
	 * @param {hash} playersHash Hash indexed with playerX of emp xml locations or empty strings.
	 * @description onClick reset all list elements (remove any EMPs and change class to '') check if an EMP is associated with the clicked li, if so embed it, give clicked l' class="selected".
	*/
	promoSwap2: function(listId,playersHash) {
			var pattern = /\s?hover\s?/;
			var pattern2 = /\s?selected\s?/;
			var links = getLinks(listId);
			links[0].className = "selected";
			links2 = collectionToArray(links);
			for (var i=0;i<links.length;i++) {
				links[i].oldInner = getDivInnerHtml(links[i]);
				links[i].onclick = function(){
					if(!pattern.test(this.className)){
						for(var j=0; j<links2.length;j++){
							links2[j].className = links2[j].className.replace(pattern2,"");
							setDivInnerHtml(links2[j]);
						}
						//Check if EMP embed is present for this div and embed it if so.
						var divs = this.getElementsByTagName("div");
						var id = divs[0].id;
						if(playersHash[id] != ''){
							var emp = new bbc.Emp();
							emp.setWidth("512");
							emp.setHeight("323");
							emp.setDomId(id); 
							emp.setPlaylist(playersHash[id]);
							emp.write();
						}
						this.className = this.className + " selected";
					}
					return false;
				}
			}
		},
		
		/**
		 * @memberOf bbcSwitch
		 * @function
		 * @param {hash} playersHash Hash indexed with playerX of emp xml locations or empty strings.
		 * @description Sets up the promo section on category pages. Removes class from first li, moves the image from within the a to inside a div with specific id, runs promoSwap2, adds link to Visit the website.
		*/
		
		categoryPromo: function(playersHash) {
			var list = jQuery(".left ul.main");
			list.attr("id","promos");
			jQuery("li.first", list).removeClass("first");
			list = document.getElementById("promos");
			var lis = list.getElementsByTagName("li");
			var i = 0;
			var lislength = lis.length;
			for(;i<lislength;i++){
				var img = lis[i].getElementsByTagName("img")[0];
				var parent = img.parentNode;
				parent.removeChild(img);
				var div = document.createElement("div");
				div.id = "player" + (i+1);
				div.appendChild(img);
				parent.appendChild(div);
			}
			promoSwap2("promos",playersHash);
			i=0;
			for(;i<lislength;i++){
				var firstLink = lis[i].firstChild;
				while(firstLink.nodeType == "3") {
					firstLink = firstLink.nextSibling;
				}
				var href = firstLink.href;
				var div = document.createElement("div");
				var newLink = document.createElement("a");
				div.className = "website";
				newLink.href = href;
				newLink.innerHTML = "Visit the website";
				newLink.onclick = function(){
					window.location = this.href;
					return true;
				}
				div.appendChild(newLink);
				firstLink.appendChild(div);
			}
		}
	}
}();